.okui-a11y-button:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-icon.icon {
    font-family: var(--ok-icon-font-family) !important
}

.okui-a11y-text {
    clip: rect(0, 0, 0, 0);
    border-width: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

@keyframes loadingLine {
    to {
        left: 100%
    }
}

.okui-loader-line {
    background: var(--okd-loader-line-inactive-color);
    border-radius: calc(var(--okd-loader-line-size)/2);
    height: var(--okd-loader-line-size);
    overflow: hidden;
    position: relative;
    width: 100%
}

.okui-loader-line .okui-loader-mark {
    background: var(--okd-loader-line-active-color);
    border-radius: calc(var(--okd-loader-line-size)/2);
    height: 100%
}

.okui-loader-line.okui-loader-loading .okui-loader-mark {
    animation: loadingLine 2s linear infinite;
    left: -25%;
    position: absolute;
    top: 0
}

@keyframes okui-loader-rotation {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.okui-loader-box {
    position: relative
}

.okui-loader-mask {
    align-items: center;
    background: var(--okd-loader-mask-bg-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.okui-loader-mask-text {
    color: var(--okd-loader-mask-text-color);
    font-size: var(--okd-loader-mask-text-font-size);
    font-weight: var(--okd-loader-mask-text-font-weight);
    line-height: var(--okd-loader-mask-text-line-height);
    margin-top: var(--okd-loader-mask-text-margin-top)
}

.okui-loader-spin {
    animation: okui-loader-rotation 1s linear infinite;
    background-color: transparent;
    border-style: solid;
    box-sizing: border-box;
    display: inline-flex
}

.okui-loader-spin-xl {
    border-radius: var(--okd-loader-circle-xl-size);
    border-width: var(--okd-loader-circle-xl-track-width);
    height: var(--okd-loader-circle-xl-size);
    width: var(--okd-loader-circle-xl-size)
}

.okui-loader-spin-lg {
    border-radius: var(--okd-loader-circle-lg-size);
    border-width: var(--okd-loader-circle-lg-track-width);
    height: var(--okd-loader-circle-lg-size);
    width: var(--okd-loader-circle-lg-size)
}

.okui-loader-spin-md {
    border-radius: var(--okd-loader-circle-md-size);
    border-width: var(--okd-loader-circle-md-track-width);
    height: var(--okd-loader-circle-md-size);
    width: var(--okd-loader-circle-md-size)
}

.okui-loader-spin-sm {
    border-radius: var(--okd-loader-circle-sm-size);
    border-width: var(--okd-loader-circle-sm-track-width);
    height: var(--okd-loader-circle-sm-size);
    width: var(--okd-loader-circle-sm-size)
}

.okui-loader-spin-primary {
    border-color: var(--okd-loader-primary-inactive-color);
    border-top-color: var(--okd-loader-primary-active-color)
}

.okui-loader-spin-neutral {
    border-color: var(--okd-loader-neutral-inactive-color);
    border-top-color: var(--okd-loader-neutral-active-color)
}

.okui-loader-inner-circle {
    border: none;
    border-radius: 0;
    overflow: hidden;
    transform: rotate(180deg)
}

.okui-loader-inner-fill-primary {
    background: var(--okd-loader-primary-active-color)
}

.okui-loader-inner-fill-neutral {
    background: var(--okd-loader-neutral-active-color)
}

.okui-loader-inner-track-primary {
    background: var(--okd-loader-primary-inactive-color)
}

.okui-loader-inner-track-neutral {
    background: var(--okd-loader-neutral-inactive-color)
}

.okui-loader-inner-track-right {
    height: 100%;
    overflow: hidden;
    position: absolute;
    right: 0
}

.okui-loader-inner-track-right-content {
    content: "";
    height: 100%;
    position: absolute;
    transform: rotate(0deg);
    transform-origin: left center;
    width: 100%
}

.okui-loader-inner-track-left {
    height: 100%;
    overflow: hidden;
    position: absolute
}

.okui-loader-inner-track-left-content {
    content: "";
    height: 100%;
    position: absolute;
    transform: rotate(0deg);
    transform-origin: right center;
    width: 100%
}

.okui-loader-inner-xl {
    border-radius: var(--okd-loader-circle-xl-size);
    height: var(--okd-loader-circle-xl-size);
    width: var(--okd-loader-circle-xl-size)
}

.okui-loader-inner-xl-cover {
    background-color: var(--okd-loader-circle-cover-background);
    border-radius: 100%;
    height: calc(var(--okd-loader-circle-xl-size) - var(--okd-loader-circle-xl-track-width)*2);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--okd-loader-circle-xl-size) - var(--okd-loader-circle-xl-track-width)*2)
}

.okui-loader-inner-track-xl {
    width: calc(var(--okd-loader-circle-xl-size)/2)
}

.okui-loader-inner-track-xl-inner-track-left-content {
    border-radius: calc(var(--okd-loader-circle-xl-size)/2) 0 0 calc(var(--okd-loader-circle-xl-size)/2);
    width: 100%
}

.okui-loader-inner-track-xl-inner-track-right-content {
    border-radius: 0 calc(var(--okd-loader-circle-xl-size)/2) calc(var(--okd-loader-circle-xl-size)/2) 0;
    width: 100%
}

.okui-loader-inner-lg {
    border-radius: var(--okd-loader-circle-lg-size);
    height: var(--okd-loader-circle-lg-size);
    width: var(--okd-loader-circle-lg-size)
}

.okui-loader-inner-lg-cover {
    background-color: var(--okd-loader-circle-cover-background);
    border-radius: 100%;
    height: calc(var(--okd-loader-circle-lg-size) - var(--okd-loader-circle-lg-track-width)*2);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--okd-loader-circle-lg-size) - var(--okd-loader-circle-lg-track-width)*2)
}

.okui-loader-inner-track-lg {
    width: calc(var(--okd-loader-circle-lg-size)/2)
}

.okui-loader-inner-track-lg-inner-track-left-content {
    border-radius: calc(var(--okd-loader-circle-lg-size)/2) 0 0 calc(var(--okd-loader-circle-lg-size)/2);
    width: 100%
}

.okui-loader-inner-track-lg-inner-track-right-content {
    border-radius: 0 calc(var(--okd-loader-circle-lg-size)/2) calc(var(--okd-loader-circle-lg-size)/2) 0;
    width: 100%
}

.okui-loader-inner-md {
    border-radius: var(--okd-loader-circle-md-size);
    height: var(--okd-loader-circle-md-size);
    width: var(--okd-loader-circle-md-size)
}

.okui-loader-inner-md-cover {
    background-color: var(--okd-loader-circle-cover-background);
    border-radius: 100%;
    height: calc(var(--okd-loader-circle-md-size) - var(--okd-loader-circle-md-track-width)*2);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--okd-loader-circle-md-size) - var(--okd-loader-circle-md-track-width)*2)
}

.okui-loader-inner-track-md {
    width: calc(var(--okd-loader-circle-md-size)/2)
}

.okui-loader-inner-track-md-inner-track-left-content {
    border-radius: calc(var(--okd-loader-circle-md-size)/2) 0 0 calc(var(--okd-loader-circle-md-size)/2);
    width: 100%
}

.okui-loader-inner-track-md-inner-track-right-content {
    border-radius: 0 calc(var(--okd-loader-circle-md-size)/2) calc(var(--okd-loader-circle-md-size)/2) 0;
    width: 100%
}

.okui-loader-inner-sm {
    border-radius: var(--okd-loader-circle-sm-size);
    height: var(--okd-loader-circle-sm-size);
    width: var(--okd-loader-circle-sm-size)
}

.okui-loader-inner-sm-cover {
    background-color: var(--okd-loader-circle-cover-background);
    border-radius: 100%;
    height: calc(var(--okd-loader-circle-sm-size) - var(--okd-loader-circle-sm-track-width)*2);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--okd-loader-circle-sm-size) - var(--okd-loader-circle-sm-track-width)*2)
}

.okui-loader-inner-track-sm {
    width: calc(var(--okd-loader-circle-sm-size)/2)
}

.okui-loader-inner-track-sm-inner-track-left-content {
    border-radius: calc(var(--okd-loader-circle-sm-size)/2) 0 0 calc(var(--okd-loader-circle-sm-size)/2);
    width: 100%
}

.okui-loader-inner-track-sm-inner-track-right-content {
    border-radius: 0 calc(var(--okd-loader-circle-sm-size)/2) calc(var(--okd-loader-circle-sm-size)/2) 0;
    width: 100%
}

.okui-powerLink {
    color: inherit;
    text-decoration: none
}

.okui-powerLink-a11y:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-btn.btn-fill-primary {
    background: var(--okd-button-fill-primary-default-background);
    border-color: var(--okd-button-fill-primary-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-fill-primary-border-size);
    box-shadow: var(--okd-button-fill-primary-default-shadow);
    color: var(--okd-button-fill-primary-default-font-color)
}

.okui-btn.btn-fill-primary.hover,
.okui-btn.btn-fill-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-fill-primary-hover-background);
    border-color: var(--okd-button-fill-primary-hover-border-color);
    box-shadow: var(--okd-button-fill-primary-hover-shadow);
    color: var(--okd-button-fill-primary-hover-font-color)
}

.okui-btn.btn-fill-primary.hover .btn-icon,
.okui-btn.btn-fill-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-fill-primary-hover-icon-color)
}

.okui-btn.btn-fill-primary.active,
.okui-btn.btn-fill-primary:not(:disabled):active {
    background: var(--okd-button-fill-primary-active-background);
    border-color: var(--okd-button-fill-primary-active-border-color);
    box-shadow: var(--okd-button-fill-primary-active-shadow);
    color: var(--okd-button-fill-primary-active-font-color)
}

.okui-btn.btn-fill-primary.active .btn-icon,
.okui-btn.btn-fill-primary:not(:disabled):active .btn-icon {
    color: var(--okd-button-fill-primary-active-icon-color)
}

.okui-btn.btn-fill-primary:not(.loading).btn-disabled,
.okui-btn.btn-fill-primary:not(.loading):disabled {
    background: var(--okd-button-fill-primary-disabled-background);
    border-color: var(--okd-button-fill-primary-disabled-border-color);
    box-shadow: var(--okd-button-fill-primary-disabled-shadow);
    color: var(--okd-button-fill-primary-disabled-font-color)
}

.okui-btn.btn-fill-primary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-primary:not(.loading):disabled .btn-icon {
    color: var(--okd-button-fill-primary-disabled-icon-color)
}

.okui-btn.btn-fill-primary.loading {
    cursor: pointer
}

.okui-btn.btn-fill-primary .btn-icon {
    color: var(--okd-button-fill-primary-default-icon-color)
}

.okui-btn.btn-fill-primary .okui-btn-loader-text {
    color: var(--okd-button-fill-primary-default-font-color)
}

.okui-btn.btn-fill-primary.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-fill-primary-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-fill-primary.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-primary-border-size)*2)
}

.okui-btn.btn-fill-primary.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-primary.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-fill-primary-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-fill-primary.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-primary-border-size)*2)
}

.okui-btn.btn-fill-primary.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-primary.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-fill-primary-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-fill-primary.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-primary-border-size)*2)
}

.okui-btn.btn-fill-primary.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-primary.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-fill-primary-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-fill-primary.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-primary-border-size)*2)
}

.okui-btn.btn-fill-primary.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-primary.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-fill-primary-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-fill-primary.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-primary-border-size)*2)
}

.okui-btn.btn-fill-primary.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-primary.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-fill-primary-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-fill-primary.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-primary-border-size)*2)
}

.okui-btn.btn-fill-primary.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-primary.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-fill-primary-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-fill-primary.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-primary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-primary-border-size)*2)
}

.okui-btn.btn-fill-primary.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-secondary {
    background: var(--okd-button-fill-secondary-default-background);
    border-color: var(--okd-button-fill-secondary-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-fill-secondary-border-size);
    box-shadow: var(--okd-button-fill-secondary-default-shadow);
    color: var(--okd-button-fill-secondary-default-font-color)
}

.okui-btn.btn-fill-secondary.hover,
.okui-btn.btn-fill-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-fill-secondary-hover-background);
    border-color: var(--okd-button-fill-secondary-hover-border-color);
    box-shadow: var(--okd-button-fill-secondary-hover-shadow);
    color: var(--okd-button-fill-secondary-hover-font-color)
}

.okui-btn.btn-fill-secondary.hover .btn-icon,
.okui-btn.btn-fill-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-fill-secondary-hover-icon-color)
}

.okui-btn.btn-fill-secondary.active,
.okui-btn.btn-fill-secondary:not(:disabled):active {
    background: var(--okd-button-fill-secondary-active-background);
    border-color: var(--okd-button-fill-secondary-active-border-color);
    box-shadow: var(--okd-button-fill-secondary-active-shadow);
    color: var(--okd-button-fill-secondary-active-font-color)
}

.okui-btn.btn-fill-secondary.active .btn-icon,
.okui-btn.btn-fill-secondary:not(:disabled):active .btn-icon {
    color: var(--okd-button-fill-secondary-active-icon-color)
}

.okui-btn.btn-fill-secondary:not(.loading).btn-disabled,
.okui-btn.btn-fill-secondary:not(.loading):disabled {
    background: var(--okd-button-fill-secondary-disabled-background);
    border-color: var(--okd-button-fill-secondary-disabled-border-color);
    box-shadow: var(--okd-button-fill-secondary-disabled-shadow);
    color: var(--okd-button-fill-secondary-disabled-font-color)
}

.okui-btn.btn-fill-secondary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-secondary:not(.loading):disabled .btn-icon {
    color: var(--okd-button-fill-secondary-disabled-icon-color)
}

.okui-btn.btn-fill-secondary.loading {
    cursor: pointer
}

.okui-btn.btn-fill-secondary .btn-icon {
    color: var(--okd-button-fill-secondary-default-icon-color)
}

.okui-btn.btn-fill-secondary .okui-btn-loader-text {
    color: var(--okd-button-fill-secondary-default-font-color)
}

.okui-btn.btn-fill-secondary.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-fill-secondary-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-fill-secondary.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-secondary-border-size)*2)
}

.okui-btn.btn-fill-secondary.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-secondary.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-fill-secondary-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-fill-secondary.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-secondary-border-size)*2)
}

.okui-btn.btn-fill-secondary.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-secondary.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-fill-secondary-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-fill-secondary.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-secondary-border-size)*2)
}

.okui-btn.btn-fill-secondary.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-secondary.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-fill-secondary-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-fill-secondary.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-secondary-border-size)*2)
}

.okui-btn.btn-fill-secondary.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-secondary.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-fill-secondary-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-fill-secondary.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-secondary-border-size)*2)
}

.okui-btn.btn-fill-secondary.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-secondary.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-fill-secondary-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-fill-secondary.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-secondary-border-size)*2)
}

.okui-btn.btn-fill-secondary.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-secondary.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-fill-secondary-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-fill-secondary.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-secondary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-secondary-border-size)*2)
}

.okui-btn.btn-fill-secondary.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-tertiary {
    background: var(--okd-button-fill-tertiary-default-background);
    border-color: var(--okd-button-fill-tertiary-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-fill-tertiary-border-size);
    box-shadow: var(--okd-button-fill-tertiary-default-shadow);
    color: var(--okd-button-fill-tertiary-default-font-color)
}

.okui-btn.btn-fill-tertiary.hover,
.okui-btn.btn-fill-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-fill-tertiary-hover-background);
    border-color: var(--okd-button-fill-tertiary-hover-border-color);
    box-shadow: var(--okd-button-fill-tertiary-hover-shadow);
    color: var(--okd-button-fill-tertiary-hover-font-color)
}

.okui-btn.btn-fill-tertiary.hover .btn-icon,
.okui-btn.btn-fill-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-fill-tertiary-hover-icon-color)
}

.okui-btn.btn-fill-tertiary.active,
.okui-btn.btn-fill-tertiary:not(:disabled):active {
    background: var(--okd-button-fill-tertiary-active-background);
    border-color: var(--okd-button-fill-tertiary-active-border-color);
    box-shadow: var(--okd-button-fill-tertiary-active-shadow);
    color: var(--okd-button-fill-tertiary-active-font-color)
}

.okui-btn.btn-fill-tertiary.active .btn-icon,
.okui-btn.btn-fill-tertiary:not(:disabled):active .btn-icon {
    color: var(--okd-button-fill-tertiary-active-icon-color)
}

.okui-btn.btn-fill-tertiary:not(.loading).btn-disabled,
.okui-btn.btn-fill-tertiary:not(.loading):disabled {
    background: var(--okd-button-fill-tertiary-disabled-background);
    border-color: var(--okd-button-fill-tertiary-disabled-border-color);
    box-shadow: var(--okd-button-fill-tertiary-disabled-shadow);
    color: var(--okd-button-fill-tertiary-disabled-font-color)
}

.okui-btn.btn-fill-tertiary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-tertiary:not(.loading):disabled .btn-icon {
    color: var(--okd-button-fill-tertiary-disabled-icon-color)
}

.okui-btn.btn-fill-tertiary.loading {
    cursor: pointer
}

.okui-btn.btn-fill-tertiary .btn-icon {
    color: var(--okd-button-fill-tertiary-default-icon-color)
}

.okui-btn.btn-fill-tertiary .okui-btn-loader-text {
    color: var(--okd-button-fill-tertiary-default-font-color)
}

.okui-btn.btn-fill-tertiary.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-fill-tertiary-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-fill-tertiary.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-tertiary-border-size)*2)
}

.okui-btn.btn-fill-tertiary.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-tertiary.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-fill-tertiary-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-fill-tertiary.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-tertiary-border-size)*2)
}

.okui-btn.btn-fill-tertiary.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-tertiary.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-fill-tertiary-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-fill-tertiary.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-tertiary-border-size)*2)
}

.okui-btn.btn-fill-tertiary.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-tertiary.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-fill-tertiary-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-fill-tertiary.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-tertiary-border-size)*2)
}

.okui-btn.btn-fill-tertiary.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-tertiary.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-fill-tertiary-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-fill-tertiary.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-tertiary-border-size)*2)
}

.okui-btn.btn-fill-tertiary.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-tertiary.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-fill-tertiary-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-fill-tertiary.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-tertiary-border-size)*2)
}

.okui-btn.btn-fill-tertiary.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-tertiary.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-fill-tertiary-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-fill-tertiary.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-tertiary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-tertiary-border-size)*2)
}

.okui-btn.btn-fill-tertiary.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-quaternary {
    background: var(--okd-button-fill-quaternary-default-background);
    border-color: var(--okd-button-fill-quaternary-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-fill-quaternary-border-size);
    box-shadow: var(--okd-button-fill-quaternary-default-shadow);
    color: var(--okd-button-fill-quaternary-default-font-color)
}

.okui-btn.btn-fill-quaternary.hover,
.okui-btn.btn-fill-quaternary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-fill-quaternary-hover-background);
    border-color: var(--okd-button-fill-quaternary-hover-border-color);
    box-shadow: var(--okd-button-fill-quaternary-hover-shadow);
    color: var(--okd-button-fill-quaternary-hover-font-color)
}

.okui-btn.btn-fill-quaternary.hover .btn-icon,
.okui-btn.btn-fill-quaternary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-fill-quaternary-hover-icon-color)
}

.okui-btn.btn-fill-quaternary.active,
.okui-btn.btn-fill-quaternary:not(:disabled):active {
    background: var(--okd-button-fill-quaternary-active-background);
    border-color: var(--okd-button-fill-quaternary-active-border-color);
    box-shadow: var(--okd-button-fill-quaternary-active-shadow);
    color: var(--okd-button-fill-quaternary-active-font-color)
}

.okui-btn.btn-fill-quaternary.active .btn-icon,
.okui-btn.btn-fill-quaternary:not(:disabled):active .btn-icon {
    color: var(--okd-button-fill-quaternary-active-icon-color)
}

.okui-btn.btn-fill-quaternary:not(.loading).btn-disabled,
.okui-btn.btn-fill-quaternary:not(.loading):disabled {
    background: var(--okd-button-fill-quaternary-disabled-background);
    border-color: var(--okd-button-fill-quaternary-disabled-border-color);
    box-shadow: var(--okd-button-fill-quaternary-disabled-shadow);
    color: var(--okd-button-fill-quaternary-disabled-font-color)
}

.okui-btn.btn-fill-quaternary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-quaternary:not(.loading):disabled .btn-icon {
    color: var(--okd-button-fill-quaternary-disabled-icon-color)
}

.okui-btn.btn-fill-quaternary.loading {
    cursor: pointer
}

.okui-btn.btn-fill-quaternary .btn-icon {
    color: var(--okd-button-fill-quaternary-default-icon-color)
}

.okui-btn.btn-fill-quaternary .okui-btn-loader-text {
    color: var(--okd-button-fill-quaternary-default-font-color)
}

.okui-btn.btn-fill-quaternary.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-fill-quaternary-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-fill-quaternary.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-quaternary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-quaternary-border-size)*2)
}

.okui-btn.btn-fill-quaternary.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-quaternary.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-fill-quaternary-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-fill-quaternary.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-quaternary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-quaternary-border-size)*2)
}

.okui-btn.btn-fill-quaternary.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-quaternary.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-fill-quaternary-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-fill-quaternary.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-quaternary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-quaternary-border-size)*2)
}

.okui-btn.btn-fill-quaternary.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-quaternary.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-fill-quaternary-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-fill-quaternary.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-quaternary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-quaternary-border-size)*2)
}

.okui-btn.btn-fill-quaternary.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-quaternary.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-fill-quaternary-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-fill-quaternary.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-quaternary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-quaternary-border-size)*2)
}

.okui-btn.btn-fill-quaternary.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-quaternary.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-fill-quaternary-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-fill-quaternary.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-quaternary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-quaternary-border-size)*2)
}

.okui-btn.btn-fill-quaternary.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-quaternary.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-fill-quaternary-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-fill-quaternary.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-quaternary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-quaternary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-quaternary-border-size)*2)
}

.okui-btn.btn-fill-quaternary.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-red {
    background: var(--okd-button-fill-red-default-background);
    border-color: var(--okd-button-fill-red-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-fill-red-border-size);
    box-shadow: var(--okd-button-fill-red-default-shadow);
    color: var(--okd-button-fill-red-default-font-color)
}

.okui-btn.btn-fill-red.hover,
.okui-btn.btn-fill-red:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-fill-red-hover-background);
    border-color: var(--okd-button-fill-red-hover-border-color);
    box-shadow: var(--okd-button-fill-red-hover-shadow);
    color: var(--okd-button-fill-red-hover-font-color)
}

.okui-btn.btn-fill-red.hover .btn-icon,
.okui-btn.btn-fill-red:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-fill-red-hover-icon-color)
}

.okui-btn.btn-fill-red.active,
.okui-btn.btn-fill-red:not(:disabled):active {
    background: var(--okd-button-fill-red-active-background);
    border-color: var(--okd-button-fill-red-active-border-color);
    box-shadow: var(--okd-button-fill-red-active-shadow);
    color: var(--okd-button-fill-red-active-font-color)
}

.okui-btn.btn-fill-red.active .btn-icon,
.okui-btn.btn-fill-red:not(:disabled):active .btn-icon {
    color: var(--okd-button-fill-red-active-icon-color)
}

.okui-btn.btn-fill-red:not(.loading).btn-disabled,
.okui-btn.btn-fill-red:not(.loading):disabled {
    background: var(--okd-button-fill-red-disabled-background);
    border-color: var(--okd-button-fill-red-disabled-border-color);
    box-shadow: var(--okd-button-fill-red-disabled-shadow);
    color: var(--okd-button-fill-red-disabled-font-color)
}

.okui-btn.btn-fill-red:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-red:not(.loading):disabled .btn-icon {
    color: var(--okd-button-fill-red-disabled-icon-color)
}

.okui-btn.btn-fill-red.loading {
    cursor: pointer
}

.okui-btn.btn-fill-red .btn-icon {
    color: var(--okd-button-fill-red-default-icon-color)
}

.okui-btn.btn-fill-red .okui-btn-loader-text {
    color: var(--okd-button-fill-red-default-font-color)
}

.okui-btn.btn-fill-red.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-fill-red-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-fill-red.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-red-border-size)*2)
}

.okui-btn.btn-fill-red.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-red.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-fill-red-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-fill-red.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-red-border-size)*2)
}

.okui-btn.btn-fill-red.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-red.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-fill-red-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-fill-red.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-red-border-size)*2)
}

.okui-btn.btn-fill-red.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-red.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-fill-red-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-fill-red.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-red-border-size)*2)
}

.okui-btn.btn-fill-red.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-red.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-fill-red-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-fill-red.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-red-border-size)*2)
}

.okui-btn.btn-fill-red.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-red.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-fill-red-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-fill-red.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-red-border-size)*2)
}

.okui-btn.btn-fill-red.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-red.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-fill-red-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-fill-red.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-red-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-red-border-size)*2)
}

.okui-btn.btn-fill-red.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-green {
    background: var(--okd-button-fill-green-default-background);
    border-color: var(--okd-button-fill-green-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-fill-green-border-size);
    box-shadow: var(--okd-button-fill-green-default-shadow);
    color: var(--okd-button-fill-green-default-font-color)
}

.okui-btn.btn-fill-green.hover,
.okui-btn.btn-fill-green:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-fill-green-hover-background);
    border-color: var(--okd-button-fill-green-hover-border-color);
    box-shadow: var(--okd-button-fill-green-hover-shadow);
    color: var(--okd-button-fill-green-hover-font-color)
}

.okui-btn.btn-fill-green.hover .btn-icon,
.okui-btn.btn-fill-green:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-fill-green-hover-icon-color)
}

.okui-btn.btn-fill-green.active,
.okui-btn.btn-fill-green:not(:disabled):active {
    background: var(--okd-button-fill-green-active-background);
    border-color: var(--okd-button-fill-green-active-border-color);
    box-shadow: var(--okd-button-fill-green-active-shadow);
    color: var(--okd-button-fill-green-active-font-color)
}

.okui-btn.btn-fill-green.active .btn-icon,
.okui-btn.btn-fill-green:not(:disabled):active .btn-icon {
    color: var(--okd-button-fill-green-active-icon-color)
}

.okui-btn.btn-fill-green:not(.loading).btn-disabled,
.okui-btn.btn-fill-green:not(.loading):disabled {
    background: var(--okd-button-fill-green-disabled-background);
    border-color: var(--okd-button-fill-green-disabled-border-color);
    box-shadow: var(--okd-button-fill-green-disabled-shadow);
    color: var(--okd-button-fill-green-disabled-font-color)
}

.okui-btn.btn-fill-green:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-green:not(.loading):disabled .btn-icon {
    color: var(--okd-button-fill-green-disabled-icon-color)
}

.okui-btn.btn-fill-green.loading {
    cursor: pointer
}

.okui-btn.btn-fill-green .btn-icon {
    color: var(--okd-button-fill-green-default-icon-color)
}

.okui-btn.btn-fill-green .okui-btn-loader-text {
    color: var(--okd-button-fill-green-default-font-color)
}

.okui-btn.btn-fill-green.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-fill-green-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-fill-green.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-green-border-size)*2)
}

.okui-btn.btn-fill-green.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-green.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-fill-green-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-fill-green.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-green-border-size)*2)
}

.okui-btn.btn-fill-green.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-green.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-fill-green-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-fill-green.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-green-border-size)*2)
}

.okui-btn.btn-fill-green.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-green.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-fill-green-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-fill-green.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-green-border-size)*2)
}

.okui-btn.btn-fill-green.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-green.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-fill-green-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-fill-green.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-green-border-size)*2)
}

.okui-btn.btn-fill-green.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-green.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-fill-green-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-fill-green.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-green-border-size)*2)
}

.okui-btn.btn-fill-green.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-green.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-fill-green-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-fill-green.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-green-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-green-border-size)*2)
}

.okui-btn.btn-fill-green.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-grey {
    background: var(--okd-button-fill-grey-default-background);
    border-color: var(--okd-button-fill-grey-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-fill-grey-border-size);
    box-shadow: var(--okd-button-fill-grey-default-shadow);
    color: var(--okd-button-fill-grey-default-font-color)
}

.okui-btn.btn-fill-grey.hover,
.okui-btn.btn-fill-grey:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-fill-grey-hover-background);
    border-color: var(--okd-button-fill-grey-hover-border-color);
    box-shadow: var(--okd-button-fill-grey-hover-shadow);
    color: var(--okd-button-fill-grey-hover-font-color)
}

.okui-btn.btn-fill-grey.hover .btn-icon,
.okui-btn.btn-fill-grey:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-fill-grey-hover-icon-color)
}

.okui-btn.btn-fill-grey.active,
.okui-btn.btn-fill-grey:not(:disabled):active {
    background: var(--okd-button-fill-grey-active-background);
    border-color: var(--okd-button-fill-grey-active-border-color);
    box-shadow: var(--okd-button-fill-grey-active-shadow);
    color: var(--okd-button-fill-grey-active-font-color)
}

.okui-btn.btn-fill-grey.active .btn-icon,
.okui-btn.btn-fill-grey:not(:disabled):active .btn-icon {
    color: var(--okd-button-fill-grey-active-icon-color)
}

.okui-btn.btn-fill-grey:not(.loading).btn-disabled,
.okui-btn.btn-fill-grey:not(.loading):disabled {
    background: var(--okd-button-fill-grey-disabled-background);
    border-color: var(--okd-button-fill-grey-disabled-border-color);
    box-shadow: var(--okd-button-fill-grey-disabled-shadow);
    color: var(--okd-button-fill-grey-disabled-font-color)
}

.okui-btn.btn-fill-grey:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-grey:not(.loading):disabled .btn-icon {
    color: var(--okd-button-fill-grey-disabled-icon-color)
}

.okui-btn.btn-fill-grey.loading {
    cursor: pointer
}

.okui-btn.btn-fill-grey .btn-icon {
    color: var(--okd-button-fill-grey-default-icon-color)
}

.okui-btn.btn-fill-grey .okui-btn-loader-text {
    color: var(--okd-button-fill-grey-default-font-color)
}

.okui-btn.btn-fill-grey.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-fill-grey-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-fill-grey.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-grey-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-grey-border-size)*2)
}

.okui-btn.btn-fill-grey.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-grey.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-fill-grey-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-fill-grey.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-grey-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-grey-border-size)*2)
}

.okui-btn.btn-fill-grey.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-grey.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-fill-grey-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-fill-grey.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-grey-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-grey-border-size)*2)
}

.okui-btn.btn-fill-grey.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-grey.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-fill-grey-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-fill-grey.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-grey-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-grey-border-size)*2)
}

.okui-btn.btn-fill-grey.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-grey.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-fill-grey-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-fill-grey.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-grey-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-grey-border-size)*2)
}

.okui-btn.btn-fill-grey.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-grey.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-fill-grey-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-fill-grey.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-grey-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-grey-border-size)*2)
}

.okui-btn.btn-fill-grey.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-grey.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-fill-grey-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-fill-grey.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-grey-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-grey-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-grey-border-size)*2)
}

.okui-btn.btn-fill-grey.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-highlight {
    background: var(--okd-button-outline-highlight-default-background);
    border-color: var(--okd-button-outline-highlight-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-outline-highlight-border-size);
    box-shadow: var(--okd-button-outline-highlight-default-shadow);
    color: var(--okd-button-outline-highlight-default-font-color)
}

.okui-btn.btn-outline-highlight.hover,
.okui-btn.btn-outline-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-outline-highlight-hover-background);
    border-color: var(--okd-button-outline-highlight-hover-border-color);
    box-shadow: var(--okd-button-outline-highlight-hover-shadow);
    color: var(--okd-button-outline-highlight-hover-font-color)
}

.okui-btn.btn-outline-highlight.hover .btn-icon,
.okui-btn.btn-outline-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-outline-highlight-hover-icon-color)
}

.okui-btn.btn-outline-highlight.active,
.okui-btn.btn-outline-highlight:not(:disabled):active {
    background: var(--okd-button-outline-highlight-active-background);
    border-color: var(--okd-button-outline-highlight-active-border-color);
    box-shadow: var(--okd-button-outline-highlight-active-shadow);
    color: var(--okd-button-outline-highlight-active-font-color)
}

.okui-btn.btn-outline-highlight.active .btn-icon,
.okui-btn.btn-outline-highlight:not(:disabled):active .btn-icon {
    color: var(--okd-button-outline-highlight-active-icon-color)
}

.okui-btn.btn-outline-highlight:not(.loading).btn-disabled,
.okui-btn.btn-outline-highlight:not(.loading):disabled {
    background: var(--okd-button-outline-highlight-disabled-background);
    border-color: var(--okd-button-outline-highlight-disabled-border-color);
    box-shadow: var(--okd-button-outline-highlight-disabled-shadow);
    color: var(--okd-button-outline-highlight-disabled-font-color)
}

.okui-btn.btn-outline-highlight:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-outline-highlight:not(.loading):disabled .btn-icon {
    color: var(--okd-button-outline-highlight-disabled-icon-color)
}

.okui-btn.btn-outline-highlight.loading {
    cursor: pointer
}

.okui-btn.btn-outline-highlight .btn-icon {
    color: var(--okd-button-outline-highlight-default-icon-color)
}

.okui-btn.btn-outline-highlight .okui-btn-loader-text {
    color: var(--okd-button-outline-highlight-default-font-color)
}

.okui-btn.btn-outline-highlight.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-outline-highlight-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-outline-highlight.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-outline-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-outline-highlight-border-size)*2)
}

.okui-btn.btn-outline-highlight.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-highlight.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-outline-highlight-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-outline-highlight.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-outline-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-outline-highlight-border-size)*2)
}

.okui-btn.btn-outline-highlight.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-highlight.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-outline-highlight-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-outline-highlight.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-outline-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-outline-highlight-border-size)*2)
}

.okui-btn.btn-outline-highlight.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-highlight.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-outline-highlight-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-outline-highlight.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-outline-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-outline-highlight-border-size)*2)
}

.okui-btn.btn-outline-highlight.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-highlight.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-outline-highlight-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-outline-highlight.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-outline-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-outline-highlight-border-size)*2)
}

.okui-btn.btn-outline-highlight.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-highlight.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-outline-highlight-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-outline-highlight.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-outline-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-outline-highlight-border-size)*2)
}

.okui-btn.btn-outline-highlight.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-highlight.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-outline-highlight-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-outline-highlight.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-outline-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-outline-highlight-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-outline-highlight-border-size)*2)
}

.okui-btn.btn-outline-highlight.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-secondary {
    background: var(--okd-button-outline-secondary-default-background);
    border-color: var(--okd-button-outline-secondary-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-outline-secondary-border-size);
    box-shadow: var(--okd-button-outline-secondary-default-shadow);
    color: var(--okd-button-outline-secondary-default-font-color)
}

.okui-btn.btn-outline-secondary.hover,
.okui-btn.btn-outline-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-outline-secondary-hover-background);
    border-color: var(--okd-button-outline-secondary-hover-border-color);
    box-shadow: var(--okd-button-outline-secondary-hover-shadow);
    color: var(--okd-button-outline-secondary-hover-font-color)
}

.okui-btn.btn-outline-secondary.hover .btn-icon,
.okui-btn.btn-outline-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-outline-secondary-hover-icon-color)
}

.okui-btn.btn-outline-secondary.active,
.okui-btn.btn-outline-secondary:not(:disabled):active {
    background: var(--okd-button-outline-secondary-active-background);
    border-color: var(--okd-button-outline-secondary-active-border-color);
    box-shadow: var(--okd-button-outline-secondary-active-shadow);
    color: var(--okd-button-outline-secondary-active-font-color)
}

.okui-btn.btn-outline-secondary.active .btn-icon,
.okui-btn.btn-outline-secondary:not(:disabled):active .btn-icon {
    color: var(--okd-button-outline-secondary-active-icon-color)
}

.okui-btn.btn-outline-secondary:not(.loading).btn-disabled,
.okui-btn.btn-outline-secondary:not(.loading):disabled {
    background: var(--okd-button-outline-secondary-disabled-background);
    border-color: var(--okd-button-outline-secondary-disabled-border-color);
    box-shadow: var(--okd-button-outline-secondary-disabled-shadow);
    color: var(--okd-button-outline-secondary-disabled-font-color)
}

.okui-btn.btn-outline-secondary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-outline-secondary:not(.loading):disabled .btn-icon {
    color: var(--okd-button-outline-secondary-disabled-icon-color)
}

.okui-btn.btn-outline-secondary.loading {
    cursor: pointer
}

.okui-btn.btn-outline-secondary .btn-icon {
    color: var(--okd-button-outline-secondary-default-icon-color)
}

.okui-btn.btn-outline-secondary .okui-btn-loader-text {
    color: var(--okd-button-outline-secondary-default-font-color)
}

.okui-btn.btn-outline-secondary.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-outline-secondary-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-outline-secondary.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-outline-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-outline-secondary-border-size)*2)
}

.okui-btn.btn-outline-secondary.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-secondary.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-outline-secondary-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-outline-secondary.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-outline-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-outline-secondary-border-size)*2)
}

.okui-btn.btn-outline-secondary.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-secondary.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-outline-secondary-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-outline-secondary.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-outline-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-outline-secondary-border-size)*2)
}

.okui-btn.btn-outline-secondary.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-secondary.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-outline-secondary-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-outline-secondary.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-outline-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-outline-secondary-border-size)*2)
}

.okui-btn.btn-outline-secondary.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-secondary.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-outline-secondary-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-outline-secondary.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-outline-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-outline-secondary-border-size)*2)
}

.okui-btn.btn-outline-secondary.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-secondary.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-outline-secondary-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-outline-secondary.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-outline-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-outline-secondary-border-size)*2)
}

.okui-btn.btn-outline-secondary.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-secondary.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-outline-secondary-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-outline-secondary.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-outline-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-outline-secondary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-outline-secondary-border-size)*2)
}

.okui-btn.btn-outline-secondary.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-tertiary {
    background: var(--okd-button-outline-tertiary-default-background);
    border-color: var(--okd-button-outline-tertiary-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-outline-tertiary-border-size);
    box-shadow: var(--okd-button-outline-tertiary-default-shadow);
    color: var(--okd-button-outline-tertiary-default-font-color)
}

.okui-btn.btn-outline-tertiary.hover,
.okui-btn.btn-outline-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-outline-tertiary-hover-background);
    border-color: var(--okd-button-outline-tertiary-hover-border-color);
    box-shadow: var(--okd-button-outline-tertiary-hover-shadow);
    color: var(--okd-button-outline-tertiary-hover-font-color)
}

.okui-btn.btn-outline-tertiary.hover .btn-icon,
.okui-btn.btn-outline-tertiary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-outline-tertiary-hover-icon-color)
}

.okui-btn.btn-outline-tertiary.active,
.okui-btn.btn-outline-tertiary:not(:disabled):active {
    background: var(--okd-button-outline-tertiary-active-background);
    border-color: var(--okd-button-outline-tertiary-active-border-color);
    box-shadow: var(--okd-button-outline-tertiary-active-shadow);
    color: var(--okd-button-outline-tertiary-active-font-color)
}

.okui-btn.btn-outline-tertiary.active .btn-icon,
.okui-btn.btn-outline-tertiary:not(:disabled):active .btn-icon {
    color: var(--okd-button-outline-tertiary-active-icon-color)
}

.okui-btn.btn-outline-tertiary:not(.loading).btn-disabled,
.okui-btn.btn-outline-tertiary:not(.loading):disabled {
    background: var(--okd-button-outline-tertiary-disabled-background);
    border-color: var(--okd-button-outline-tertiary-disabled-border-color);
    box-shadow: var(--okd-button-outline-tertiary-disabled-shadow);
    color: var(--okd-button-outline-tertiary-disabled-font-color)
}

.okui-btn.btn-outline-tertiary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-outline-tertiary:not(.loading):disabled .btn-icon {
    color: var(--okd-button-outline-tertiary-disabled-icon-color)
}

.okui-btn.btn-outline-tertiary.loading {
    cursor: pointer
}

.okui-btn.btn-outline-tertiary .btn-icon {
    color: var(--okd-button-outline-tertiary-default-icon-color)
}

.okui-btn.btn-outline-tertiary .okui-btn-loader-text {
    color: var(--okd-button-outline-tertiary-default-font-color)
}

.okui-btn.btn-outline-tertiary.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-outline-tertiary-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-outline-tertiary.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-outline-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-outline-tertiary-border-size)*2)
}

.okui-btn.btn-outline-tertiary.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-tertiary.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-outline-tertiary-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-outline-tertiary.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-outline-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-outline-tertiary-border-size)*2)
}

.okui-btn.btn-outline-tertiary.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-tertiary.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-outline-tertiary-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-outline-tertiary.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-outline-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-outline-tertiary-border-size)*2)
}

.okui-btn.btn-outline-tertiary.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-tertiary.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-outline-tertiary-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-outline-tertiary.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-outline-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-outline-tertiary-border-size)*2)
}

.okui-btn.btn-outline-tertiary.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-tertiary.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-outline-tertiary-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-outline-tertiary.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-outline-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-outline-tertiary-border-size)*2)
}

.okui-btn.btn-outline-tertiary.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-tertiary.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-outline-tertiary-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-outline-tertiary.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-outline-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-outline-tertiary-border-size)*2)
}

.okui-btn.btn-outline-tertiary.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-tertiary.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-outline-tertiary-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-outline-tertiary.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-outline-tertiary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-outline-tertiary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-outline-tertiary-border-size)*2)
}

.okui-btn.btn-outline-tertiary.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-primary {
    background: var(--okd-button-text-primary-default-background);
    border-color: var(--okd-button-text-primary-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-text-primary-border-size);
    box-shadow: var(--okd-button-text-primary-default-shadow);
    color: var(--okd-button-text-primary-default-font-color)
}

.okui-btn.btn-text-primary.hover,
.okui-btn.btn-text-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-text-primary-hover-background);
    border-color: var(--okd-button-text-primary-hover-border-color);
    box-shadow: var(--okd-button-text-primary-hover-shadow);
    color: var(--okd-button-text-primary-hover-font-color)
}

.okui-btn.btn-text-primary.hover .btn-icon,
.okui-btn.btn-text-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-text-primary-hover-icon-color)
}

.okui-btn.btn-text-primary.active,
.okui-btn.btn-text-primary:not(:disabled):active {
    background: var(--okd-button-text-primary-active-background);
    border-color: var(--okd-button-text-primary-active-border-color);
    box-shadow: var(--okd-button-text-primary-active-shadow);
    color: var(--okd-button-text-primary-active-font-color)
}

.okui-btn.btn-text-primary.active .btn-icon,
.okui-btn.btn-text-primary:not(:disabled):active .btn-icon {
    color: var(--okd-button-text-primary-active-icon-color)
}

.okui-btn.btn-text-primary:not(.loading).btn-disabled,
.okui-btn.btn-text-primary:not(.loading):disabled {
    background: var(--okd-button-text-primary-disabled-background);
    border-color: var(--okd-button-text-primary-disabled-border-color);
    box-shadow: var(--okd-button-text-primary-disabled-shadow);
    color: var(--okd-button-text-primary-disabled-font-color)
}

.okui-btn.btn-text-primary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-primary:not(.loading):disabled .btn-icon {
    color: var(--okd-button-text-primary-disabled-icon-color)
}

.okui-btn.btn-text-primary.loading {
    cursor: pointer
}

.okui-btn.btn-text-primary .btn-icon {
    color: var(--okd-button-text-primary-default-icon-color)
}

.okui-btn.btn-text-primary .okui-btn-loader-text {
    color: var(--okd-button-text-primary-default-font-color)
}

.okui-btn.btn-text-primary.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-text-primary-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-text-primary.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-primary-border-size)*2)
}

.okui-btn.btn-text-primary.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-primary.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-text-primary-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-text-primary.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-primary-border-size)*2)
}

.okui-btn.btn-text-primary.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-primary.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-text-primary-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-text-primary.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-primary-border-size)*2)
}

.okui-btn.btn-text-primary.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-primary.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-text-primary-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-text-primary.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-primary-border-size)*2)
}

.okui-btn.btn-text-primary.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-primary.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-text-primary-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-text-primary.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-primary-border-size)*2)
}

.okui-btn.btn-text-primary.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-primary.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-text-primary-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-text-primary.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-primary-border-size)*2)
}

.okui-btn.btn-text-primary.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-primary.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-text-primary-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-text-primary.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-primary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-primary-border-size)*2)
}

.okui-btn.btn-text-primary.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-secondary {
    background: var(--okd-button-text-secondary-default-background);
    border-color: var(--okd-button-text-secondary-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-text-secondary-border-size);
    box-shadow: var(--okd-button-text-secondary-default-shadow);
    color: var(--okd-button-text-secondary-default-font-color)
}

.okui-btn.btn-text-secondary.hover,
.okui-btn.btn-text-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-text-secondary-hover-background);
    border-color: var(--okd-button-text-secondary-hover-border-color);
    box-shadow: var(--okd-button-text-secondary-hover-shadow);
    color: var(--okd-button-text-secondary-hover-font-color)
}

.okui-btn.btn-text-secondary.hover .btn-icon,
.okui-btn.btn-text-secondary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-text-secondary-hover-icon-color)
}

.okui-btn.btn-text-secondary.active,
.okui-btn.btn-text-secondary:not(:disabled):active {
    background: var(--okd-button-text-secondary-active-background);
    border-color: var(--okd-button-text-secondary-active-border-color);
    box-shadow: var(--okd-button-text-secondary-active-shadow);
    color: var(--okd-button-text-secondary-active-font-color)
}

.okui-btn.btn-text-secondary.active .btn-icon,
.okui-btn.btn-text-secondary:not(:disabled):active .btn-icon {
    color: var(--okd-button-text-secondary-active-icon-color)
}

.okui-btn.btn-text-secondary:not(.loading).btn-disabled,
.okui-btn.btn-text-secondary:not(.loading):disabled {
    background: var(--okd-button-text-secondary-disabled-background);
    border-color: var(--okd-button-text-secondary-disabled-border-color);
    box-shadow: var(--okd-button-text-secondary-disabled-shadow);
    color: var(--okd-button-text-secondary-disabled-font-color)
}

.okui-btn.btn-text-secondary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-secondary:not(.loading):disabled .btn-icon {
    color: var(--okd-button-text-secondary-disabled-icon-color)
}

.okui-btn.btn-text-secondary.loading {
    cursor: pointer
}

.okui-btn.btn-text-secondary .btn-icon {
    color: var(--okd-button-text-secondary-default-icon-color)
}

.okui-btn.btn-text-secondary .okui-btn-loader-text {
    color: var(--okd-button-text-secondary-default-font-color)
}

.okui-btn.btn-text-secondary.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-text-secondary-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-text-secondary.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-secondary-border-size)*2)
}

.okui-btn.btn-text-secondary.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-secondary.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-text-secondary-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-text-secondary.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-secondary-border-size)*2)
}

.okui-btn.btn-text-secondary.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-secondary.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-text-secondary-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-text-secondary.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-secondary-border-size)*2)
}

.okui-btn.btn-text-secondary.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-secondary.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-text-secondary-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-text-secondary.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-secondary-border-size)*2)
}

.okui-btn.btn-text-secondary.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-secondary.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-text-secondary-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-text-secondary.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-secondary-border-size)*2)
}

.okui-btn.btn-text-secondary.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-secondary.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-text-secondary-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-text-secondary.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-secondary-border-size)*2)
}

.okui-btn.btn-text-secondary.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-secondary.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-text-secondary-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-text-secondary.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-secondary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-secondary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-secondary-border-size)*2)
}

.okui-btn.btn-text-secondary.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-red {
    background: var(--okd-button-text-red-default-background);
    border-color: var(--okd-button-text-red-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-text-red-border-size);
    box-shadow: var(--okd-button-text-red-default-shadow);
    color: var(--okd-button-text-red-default-font-color)
}

.okui-btn.btn-text-red.hover,
.okui-btn.btn-text-red:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-text-red-hover-background);
    border-color: var(--okd-button-text-red-hover-border-color);
    box-shadow: var(--okd-button-text-red-hover-shadow);
    color: var(--okd-button-text-red-hover-font-color)
}

.okui-btn.btn-text-red.hover .btn-icon,
.okui-btn.btn-text-red:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-text-red-hover-icon-color)
}

.okui-btn.btn-text-red.active,
.okui-btn.btn-text-red:not(:disabled):active {
    background: var(--okd-button-text-red-active-background);
    border-color: var(--okd-button-text-red-active-border-color);
    box-shadow: var(--okd-button-text-red-active-shadow);
    color: var(--okd-button-text-red-active-font-color)
}

.okui-btn.btn-text-red.active .btn-icon,
.okui-btn.btn-text-red:not(:disabled):active .btn-icon {
    color: var(--okd-button-text-red-active-icon-color)
}

.okui-btn.btn-text-red:not(.loading).btn-disabled,
.okui-btn.btn-text-red:not(.loading):disabled {
    background: var(--okd-button-text-red-disabled-background);
    border-color: var(--okd-button-text-red-disabled-border-color);
    box-shadow: var(--okd-button-text-red-disabled-shadow);
    color: var(--okd-button-text-red-disabled-font-color)
}

.okui-btn.btn-text-red:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-red:not(.loading):disabled .btn-icon {
    color: var(--okd-button-text-red-disabled-icon-color)
}

.okui-btn.btn-text-red.loading {
    cursor: pointer
}

.okui-btn.btn-text-red .btn-icon {
    color: var(--okd-button-text-red-default-icon-color)
}

.okui-btn.btn-text-red .okui-btn-loader-text {
    color: var(--okd-button-text-red-default-font-color)
}

.okui-btn.btn-text-red.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-text-red-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-text-red.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-red-border-size)*2)
}

.okui-btn.btn-text-red.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-red.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-text-red-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-text-red.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-red-border-size)*2)
}

.okui-btn.btn-text-red.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-red.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-text-red-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-text-red.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-red-border-size)*2)
}

.okui-btn.btn-text-red.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-red.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-text-red-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-text-red.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-red-border-size)*2)
}

.okui-btn.btn-text-red.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-red.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-text-red-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-text-red.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-red-border-size)*2)
}

.okui-btn.btn-text-red.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-red.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-text-red-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-text-red.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-red-border-size)*2)
}

.okui-btn.btn-text-red.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-red.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-text-red-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-text-red.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-red-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-red-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-red-border-size)*2)
}

.okui-btn.btn-text-red.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-green {
    background: var(--okd-button-text-green-default-background);
    border-color: var(--okd-button-text-green-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-text-green-border-size);
    box-shadow: var(--okd-button-text-green-default-shadow);
    color: var(--okd-button-text-green-default-font-color)
}

.okui-btn.btn-text-green.hover,
.okui-btn.btn-text-green:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-text-green-hover-background);
    border-color: var(--okd-button-text-green-hover-border-color);
    box-shadow: var(--okd-button-text-green-hover-shadow);
    color: var(--okd-button-text-green-hover-font-color)
}

.okui-btn.btn-text-green.hover .btn-icon,
.okui-btn.btn-text-green:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-text-green-hover-icon-color)
}

.okui-btn.btn-text-green.active,
.okui-btn.btn-text-green:not(:disabled):active {
    background: var(--okd-button-text-green-active-background);
    border-color: var(--okd-button-text-green-active-border-color);
    box-shadow: var(--okd-button-text-green-active-shadow);
    color: var(--okd-button-text-green-active-font-color)
}

.okui-btn.btn-text-green.active .btn-icon,
.okui-btn.btn-text-green:not(:disabled):active .btn-icon {
    color: var(--okd-button-text-green-active-icon-color)
}

.okui-btn.btn-text-green:not(.loading).btn-disabled,
.okui-btn.btn-text-green:not(.loading):disabled {
    background: var(--okd-button-text-green-disabled-background);
    border-color: var(--okd-button-text-green-disabled-border-color);
    box-shadow: var(--okd-button-text-green-disabled-shadow);
    color: var(--okd-button-text-green-disabled-font-color)
}

.okui-btn.btn-text-green:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-green:not(.loading):disabled .btn-icon {
    color: var(--okd-button-text-green-disabled-icon-color)
}

.okui-btn.btn-text-green.loading {
    cursor: pointer
}

.okui-btn.btn-text-green .btn-icon {
    color: var(--okd-button-text-green-default-icon-color)
}

.okui-btn.btn-text-green .okui-btn-loader-text {
    color: var(--okd-button-text-green-default-font-color)
}

.okui-btn.btn-text-green.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-text-green-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-text-green.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-green-border-size)*2)
}

.okui-btn.btn-text-green.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-green.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-text-green-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-text-green.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-green-border-size)*2)
}

.okui-btn.btn-text-green.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-green.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-text-green-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-text-green.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-green-border-size)*2)
}

.okui-btn.btn-text-green.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-green.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-text-green-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-text-green.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-green-border-size)*2)
}

.okui-btn.btn-text-green.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-green.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-text-green-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-text-green.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-green-border-size)*2)
}

.okui-btn.btn-text-green.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-green.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-text-green-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-text-green.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-green-border-size)*2)
}

.okui-btn.btn-text-green.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-green.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-text-green-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-text-green.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-green-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-green-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-green-border-size)*2)
}

.okui-btn.btn-text-green.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-orange {
    background: var(--okd-button-text-orange-default-background);
    border-color: var(--okd-button-text-orange-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-text-orange-border-size);
    box-shadow: var(--okd-button-text-orange-default-shadow);
    color: var(--okd-button-text-orange-default-font-color)
}

.okui-btn.btn-text-orange.hover,
.okui-btn.btn-text-orange:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-text-orange-hover-background);
    border-color: var(--okd-button-text-orange-hover-border-color);
    box-shadow: var(--okd-button-text-orange-hover-shadow);
    color: var(--okd-button-text-orange-hover-font-color)
}

.okui-btn.btn-text-orange.hover .btn-icon,
.okui-btn.btn-text-orange:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-text-orange-hover-icon-color)
}

.okui-btn.btn-text-orange.active,
.okui-btn.btn-text-orange:not(:disabled):active {
    background: var(--okd-button-text-orange-active-background);
    border-color: var(--okd-button-text-orange-active-border-color);
    box-shadow: var(--okd-button-text-orange-active-shadow);
    color: var(--okd-button-text-orange-active-font-color)
}

.okui-btn.btn-text-orange.active .btn-icon,
.okui-btn.btn-text-orange:not(:disabled):active .btn-icon {
    color: var(--okd-button-text-orange-active-icon-color)
}

.okui-btn.btn-text-orange:not(.loading).btn-disabled,
.okui-btn.btn-text-orange:not(.loading):disabled {
    background: var(--okd-button-text-orange-disabled-background);
    border-color: var(--okd-button-text-orange-disabled-border-color);
    box-shadow: var(--okd-button-text-orange-disabled-shadow);
    color: var(--okd-button-text-orange-disabled-font-color)
}

.okui-btn.btn-text-orange:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-orange:not(.loading):disabled .btn-icon {
    color: var(--okd-button-text-orange-disabled-icon-color)
}

.okui-btn.btn-text-orange.loading {
    cursor: pointer
}

.okui-btn.btn-text-orange .btn-icon {
    color: var(--okd-button-text-orange-default-icon-color)
}

.okui-btn.btn-text-orange .okui-btn-loader-text {
    color: var(--okd-button-text-orange-default-font-color)
}

.okui-btn.btn-text-orange.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-text-orange-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-text-orange.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-orange-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-orange-border-size)*2)
}

.okui-btn.btn-text-orange.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-orange.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-text-orange-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-text-orange.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-orange-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-orange-border-size)*2)
}

.okui-btn.btn-text-orange.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-orange.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-text-orange-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-text-orange.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-orange-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-orange-border-size)*2)
}

.okui-btn.btn-text-orange.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-orange.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-text-orange-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-text-orange.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-orange-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-orange-border-size)*2)
}

.okui-btn.btn-text-orange.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-orange.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-text-orange-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-text-orange.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-orange-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-orange-border-size)*2)
}

.okui-btn.btn-text-orange.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-orange.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-text-orange-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-text-orange.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-orange-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-orange-border-size)*2)
}

.okui-btn.btn-text-orange.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-orange.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-text-orange-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-text-orange.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-orange-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-orange-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-orange-border-size)*2)
}

.okui-btn.btn-text-orange.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-yellow {
    background: var(--okd-button-text-yellow-default-background);
    border-color: var(--okd-button-text-yellow-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-text-yellow-border-size);
    box-shadow: var(--okd-button-text-yellow-default-shadow);
    color: var(--okd-button-text-yellow-default-font-color)
}

.okui-btn.btn-text-yellow.hover,
.okui-btn.btn-text-yellow:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-text-yellow-hover-background);
    border-color: var(--okd-button-text-yellow-hover-border-color);
    box-shadow: var(--okd-button-text-yellow-hover-shadow);
    color: var(--okd-button-text-yellow-hover-font-color)
}

.okui-btn.btn-text-yellow.hover .btn-icon,
.okui-btn.btn-text-yellow:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-text-yellow-hover-icon-color)
}

.okui-btn.btn-text-yellow.active,
.okui-btn.btn-text-yellow:not(:disabled):active {
    background: var(--okd-button-text-yellow-active-background);
    border-color: var(--okd-button-text-yellow-active-border-color);
    box-shadow: var(--okd-button-text-yellow-active-shadow);
    color: var(--okd-button-text-yellow-active-font-color)
}

.okui-btn.btn-text-yellow.active .btn-icon,
.okui-btn.btn-text-yellow:not(:disabled):active .btn-icon {
    color: var(--okd-button-text-yellow-active-icon-color)
}

.okui-btn.btn-text-yellow:not(.loading).btn-disabled,
.okui-btn.btn-text-yellow:not(.loading):disabled {
    background: var(--okd-button-text-yellow-disabled-background);
    border-color: var(--okd-button-text-yellow-disabled-border-color);
    box-shadow: var(--okd-button-text-yellow-disabled-shadow);
    color: var(--okd-button-text-yellow-disabled-font-color)
}

.okui-btn.btn-text-yellow:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-text-yellow:not(.loading):disabled .btn-icon {
    color: var(--okd-button-text-yellow-disabled-icon-color)
}

.okui-btn.btn-text-yellow.loading {
    cursor: pointer
}

.okui-btn.btn-text-yellow .btn-icon {
    color: var(--okd-button-text-yellow-default-icon-color)
}

.okui-btn.btn-text-yellow .okui-btn-loader-text {
    color: var(--okd-button-text-yellow-default-font-color)
}

.okui-btn.btn-text-yellow.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-text-yellow-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-text-yellow.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-yellow-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-text-yellow-border-size)*2)
}

.okui-btn.btn-text-yellow.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-yellow.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-text-yellow-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-text-yellow.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-yellow-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-text-yellow-border-size)*2)
}

.okui-btn.btn-text-yellow.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-yellow.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-text-yellow-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-text-yellow.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-yellow-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-text-yellow-border-size)*2)
}

.okui-btn.btn-text-yellow.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-yellow.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-text-yellow-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-text-yellow.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-yellow-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-text-yellow-border-size)*2)
}

.okui-btn.btn-text-yellow.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-yellow.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-text-yellow-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-text-yellow.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-yellow-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-text-yellow-border-size)*2)
}

.okui-btn.btn-text-yellow.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-yellow.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-text-yellow-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-text-yellow.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-yellow-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-text-yellow-border-size)*2)
}

.okui-btn.btn-text-yellow.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-text-yellow.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-text-yellow-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-text-yellow.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-yellow-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-text-yellow-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-text-yellow-border-size)*2)
}

.okui-btn.btn-text-yellow.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn .okui-btn-fill-primary-loader {
    border-color: var(--okd-button-fill-primary-loader-track-color);
    border-top-color: var(--okd-button-fill-primary-loader-mark-color)
}

.okui-btn .okui-btn-fill-secondary-loader {
    border-color: var(--okd-button-fill-secondary-loader-track-color);
    border-top-color: var(--okd-button-fill-secondary-loader-mark-color)
}

.okui-btn .okui-btn-fill-tertiary-loader {
    border-color: var(--okd-button-fill-tertiary-loader-track-color);
    border-top-color: var(--okd-button-fill-tertiary-loader-mark-color)
}

.okui-btn .okui-btn-fill-quaternary-loader {
    border-color: var(--okd-button-fill-quaternary-loader-track-color);
    border-top-color: var(--okd-button-fill-quaternary-loader-mark-color)
}

.okui-btn .okui-btn-fill-red-loader {
    border-color: var(--okd-button-fill-red-loader-track-color);
    border-top-color: var(--okd-button-fill-red-loader-mark-color)
}

.okui-btn .okui-btn-fill-green-loader {
    border-color: var(--okd-button-fill-green-loader-track-color);
    border-top-color: var(--okd-button-fill-green-loader-mark-color)
}

.okui-btn .okui-btn-fill-grey-loader {
    border-color: var(--okd-button-fill-grey-loader-track-color);
    border-top-color: var(--okd-button-fill-grey-loader-mark-color)
}

.okui-btn .okui-btn-outline-highlight-loader {
    border-color: var(--okd-button-outline-highlight-loader-track-color);
    border-top-color: var(--okd-button-outline-highlight-loader-mark-color)
}

.okui-btn .okui-btn-outline-secondary-loader {
    border-color: var(--okd-button-outline-secondary-loader-track-color);
    border-top-color: var(--okd-button-outline-secondary-loader-mark-color)
}

.okui-btn .okui-btn-outline-tertiary-loader {
    border-color: var(--okd-button-outline-tertiary-loader-track-color);
    border-top-color: var(--okd-button-outline-tertiary-loader-mark-color)
}

.okui-picture {
    display: inline-block
}

.okui-picture-font {
    font-size: 0;
    line-height: 1
}

.okui-picture-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.okui-picture-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.okui-mask {
    background: rgba(0, 0, 0, .65);
    background: var(--okd-dialog-window-mask-color, rgba(0, 0, 0, .65));
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0
}

.okui-transition-fade {
    transition: opacity .3s linear
}

.okui-transition-fade-active {
    will-change: opacity
}

.okui-transition-fade-ease-out {
    transition-timing-function: cubic-bezier(.5, 0, .52, 1)
}

.okui-transition-fade-entered,
.okui-transition-fade-entering {
    opacity: 1
}

.okui-transition-fade-exited,
.okui-transition-fade-exiting {
    opacity: 0
}

.okui-transition-slide {
    backface-visibility: hidden;
    perspective: 1000px;
    position: fixed;
    transform: translateY(100%);
    transform-style: preserve-3d;
    transition: transform .3s linear, opacity .3s linear
}

.okui-transition-slide-active {
    will-change: transform, opacity
}

.okui-transition-slide-cubic {
    transition-timing-function: ease
}

.okui-transition-slide-top {
    left: 0;
    top: 0;
    width: 100%
}

.okui-transition-slide-bottom {
    bottom: 0;
    left: 0;
    width: 100%
}

.okui-transition-slide-left {
    height: 100%;
    left: 0;
    top: 0
}

.okui-transition-slide-right {
    height: 100%;
    right: 0;
    top: 0
}

.okui-transition-slide-entered,
.okui-transition-slide-entering {
    opacity: 1;
    transform: none
}

.okui-transition-slide-exited,
.okui-transition-slide-exiting {
    opacity: 0
}

.okui-transition-slide-exited.okui-transition-slide-top,
.okui-transition-slide-exiting.okui-transition-slide-top {
    transform: translateY(-100%)
}

.okui-transition-slide-exited.okui-transition-slide-bottom,
.okui-transition-slide-exiting.okui-transition-slide-bottom {
    transform: translateY(100%)
}

.okui-transition-slide-exited.okui-transition-slide-left,
.okui-transition-slide-exiting.okui-transition-slide-left {
    transform: translateX(-100%)
}

.okui-transition-slide-exited.okui-transition-slide-right,
.okui-transition-slide-exiting.okui-transition-slide-right {
    transform: translateX(100%)
}

@media (hover:none) and (pointer:coarse) {
    .okui-transition-slide {
        transition-duration: .2s
    }
}

.okui-dialog {
    --inner-okd-dialog-close-btn-padding: var(--okd-dialog-window-action-fixed-padding, 16px);
    height: 100%;
    pointer-events: none;
    width: 100%
}

.okui-dialog-float {
    left: 0;
    position: fixed;
    top: 0
}

.okui-dialog * {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box
}

.okui-dialog-window-float {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

@supports (bottom:constant(safe-area-inset-bottom)) or (bottom:env(safe-area-inset-bottom)) {
    .okui-dialog-window-safe {
        padding-bottom: env(safe-area-inset-bottom)
    }
}

.okui-dialog-window {
    border-radius: var(--okd-dialog-window-border-radius);
    box-shadow: var(--okd-dialog-window-box-shadow);
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-height: calc(100% - 48px);
    outline: none;
    pointer-events: auto;
    width: calc(100% - 32px)
}

.okui-dialog-window-border {
    border: 1px solid transparent;
    border: 1px solid var(--okd-dialog-window-border-color, transparent)
}

.okui-dialog-title-container {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    justify-content: space-between
}

.okui-dialog-title-container .title-center {
    text-align: center
}

.okui-dialog-title-container .title-center .modal-title {
    justify-content: center
}

.okui-dialog-title-block {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.okui-dialog-title-block .modal-title {
    font-size: 16px;
    font-size: var(--okd-dialog-title-font-size, 16px);
    font-weight: 700;
    font-weight: var(--okd-dialog-title-font-weight, 700);
    line-height: var(--okd-dialog-title-line-height);
    padding-top: 2px
}

.okui-dialog-title-block .modal-sub-title {
    font-size: var(--okd-dialog-sub-title-font-size);
    font-weight: 400;
    line-height: var(--okd-dialog-sub-title-line-height);
    margin-top: 2px
}

.okui-dialog-b-btn,
.okui-dialog-c-btn {
    cursor: pointer;
    display: inline-block;
    height: var(--okd-dialog-window-close-icon-size);
    justify-content: center;
    line-height: 1;
    position: relative;
    vertical-align: middle;
    width: var(--okd-dialog-window-close-icon-size);
    z-index: 1
}

.okui-dialog-b-btn.icon,
.okui-dialog-c-btn.icon {
    font-size: var(--okd-dialog-window-close-icon-size)
}

.okui-dialog-b-btn:after,
.okui-dialog-c-btn:after {
    content: " ";
    display: block;
    height: calc(var(--okd-dialog-window-close-icon-size)*1.5);
    left: -25%;
    position: absolute;
    top: -25%;
    width: calc(var(--okd-dialog-window-close-icon-size)*1.5)
}

.okui-dialog-b-btn {
    height: var(--okd-dialog-window-back-icon-size);
    margin-right: 16px;
    margin-right: var(--okd-dialog-title-icon-back-margin-right, 16px);
    width: var(--okd-dialog-window-back-icon-size)
}

.okui-dialog-b-btn.icon {
    font-size: var(--okd-dialog-window-back-icon-size)
}

.okui-dialog-c-btn {
    margin-left: 32px;
    margin-left: var(--okd-dialog-title-icon-close-margin-left, 32px)
}

.okui-dialog-top-action-fixed {
    padding: var(--inner-okd-dialog-close-btn-padding);
    position: absolute;
    top: 0
}

.okui-dialog-top-action-fixed .okui-dialog-b-btn,
.okui-dialog-top-action-fixed .okui-dialog-c-btn {
    margin: 0
}

.okui-dialog-top-l {
    align-self: flex-start;
    left: 0
}

.okui-dialog-top-r {
    align-self: flex-start;
    right: 0
}

.okui-dialog-top-hidden-for-t-center {
    pointer-events: none;
    visibility: hidden
}

.okui-dialog-top-action-hidden {
    display: none;
    pointer-events: none
}

.okui-dialog-scroll-box {
    flex-grow: 1;
    overflow-y: auto
}

.okui-dialog-scroll-box.scroll-disable {
    overflow-y: visible;
    overflow-y: initial
}

.okui-dialog-container,
.okui-dialog-customer-box {
    height: 100%
}

.okui-dialog-container.no-padding,
.okui-dialog-customer-box.no-padding {
    padding: 0
}

.okui-dialog .okui-dialog-footer-line {
    border-top: thin solid var(--okd-dialog-window-split-line-border-color)
}

.okui-dialog .okui-dialog-header-line {
    border-bottom: thin solid var(--okd-dialog-window-split-line-border-color)
}

.okui-dialog-btn-box {
    display: flex
}

.okui-dialog-btn-box.layout-right {
    justify-content: flex-end
}

.okui-dialog-btn-box.layout-left {
    justify-content: flex-start
}

.okui-dialog-btn-box.layout-full .dialog-btn {
    flex: 1 1
}

.okui-dialog .okui-dialog-window {
    background: var(--okd-dialog-window-background);
    color: var(--okd-dialog-window-default-text-color)
}

.okui-dialog .okui-dialog-window.container-mode {
    background: transparent;
    box-shadow: none
}

.okui-dialog .okui-dialog-title-container .modal-title {
    align-items: center;
    color: var(--okd-dialog-title-color);
    display: flex
}

.okui-dialog .okui-dialog-title-container .modal-sub-title {
    color: var(--okd-dialog-sub-title-color)
}

.okui-dialog .okui-dialog-c-btn {
    color: var(--okd-color-gray-400);
    color: var(--okd-dialog-title-icon-close-color, var(--okd-color-gray-400))
}

.okui-dialog .okui-dialog-c-btn:hover {
    background-color: var(--okd-color-background-hover);
    background-color: var(--okd-dialog-title-icon-hover-background-color, var(--okd-color-background-hover));
    border-radius: 4px;
    border-radius: var(--okd-dialog-title-icon-hover-border-radius, 4px);
    color: var(--okd-color-gray-900);
    color: var(--okd-dialog-title-icon-close-hover-color, var(--okd-color-gray-900))
}

.okui-dialog .okui-dialog-b-btn {
    color: var(--okd-color-gray-900);
    color: var(--okd-dialog-title-icon-back-color, var(--okd-color-gray-900))
}

.okui-dialog .okui-dialog-b-btn:hover {
    background-color: var(--okd-color-background-hover);
    background-color: var(--okd-dialog-title-icon-hover-background-color, var(--okd-color-background-hover));
    border-radius: 4px;
    border-radius: var(--okd-dialog-title-icon-hover-border-radius, 4px)
}

.okui-dialog-mask {
    background: var(--okd-dialog-window-mask-color)
}

.okui-dialog-scroll-bar-end::-webkit-scrollbar,
.okui-dialog-scroll-bar-start::-webkit-scrollbar {
    background-color: transparent
}

.okui-dialog-scroll-bar-start::-webkit-scrollbar-button:vertical:start:increment {
    background-color: transparent;
    display: block;
    height: var(--okd-dialog-window-border-radius)
}

.okui-dialog-scroll-bar-end::-webkit-scrollbar-button:vertical:end:increment {
    background-color: transparent;
    display: block;
    height: var(--okd-dialog-window-border-radius)
}

@media (min-width:768px) {
    .okui-dialog-window {
        min-width: var(--okd-dialog-window-min-width);
        width: auto
    }

    .okui-dialog-title-container {
        padding: var(--okd-dialog-title-box-md-padding-vertical) var(--okd-dialog-container-md-padding-horizontal)
    }

    .okui-dialog-container {
        padding: var(--okd-dialog-container-md-padding-vertical) var(--okd-dialog-container-md-padding-horizontal)
    }

    .okui-dialog-customer-box {
        padding: 0 var(--okd-dialog-container-md-padding-horizontal)
    }

    .okui-dialog-footer-box {
        padding: var(--okd-dialog-footer-box-md-padding-vertical) var(--okd-dialog-container-md-padding-horizontal)
    }

    .okui-dialog-btn-box .dialog-btn.double-btn {
        width: auto
    }

    .okui-dialog-btn-box.layout-full {
        flex-direction: row
    }

    .okui-dialog-btn-box .dialog-btn+.dialog-btn {
        margin-left: 16px;
        margin-left: var(--okd-dialog-footer-btn-md-margin-left, 16px)
    }
}

@media (max-width:767px) {
    .okui-dialog-title-container {
        padding: var(--okd-dialog-title-box-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
    }

    .okui-dialog-container {
        padding: var(--okd-dialog-container-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
    }

    .okui-dialog-customer-box {
        padding: 0 var(--okd-dialog-container-sm-padding-horizontal)
    }

    .okui-dialog-footer-box {
        padding: var(--okd-dialog-footer-box-sm-padding-top, 12px) var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-footer-box-sm-padding-bottom, 20px)
    }

    .okui-dialog-btn-box .dialog-btn {
        width: 100%
    }

    .okui-dialog-btn-box .dialog-btn+.dialog-btn {
        margin-left: 12px;
        margin-left: var(--okd-dialog-footer-btn-sm-margin-left, 12px)
    }

    .okui-dialog-btn-box.layout-full {
        flex-direction: column-reverse
    }

    .okui-dialog-btn-box.layout-full .dialog-btn+.dialog-btn {
        margin-left: 0
    }

    .okui-dialog-btn-box.layout-full .double-btn:first-child {
        margin-top: 8px;
        margin-top: var(--okd-dialog-footer-btn-full-sm-margin-top, 8px)
    }

    .okui-dialog-window {
        border-radius: 8px;
        border-radius: var(--okd-dialog-window-sm-border-radius, 8px)
    }

    .okui-dialog-window.full-page {
        height: auto !important;
        min-height: calc(100% - 48px) !important
    }

    .okui-dialog-window.full-page-with-show-header {
        height: auto !important
    }

    .okui-dialog-window.bottom-align {
        border-radius: var(--okd-dialog-window-border-radius) var(--okd-dialog-window-border-radius) 0 0;
        bottom: 0;
        top: auto;
        transform: translate(-50%)
    }

    .okui-dialog-window.no-margin {
        min-width: 0;
        min-width: auto;
        width: 100%
    }
}

.okui-dialog-mobile-mode .okui-dialog-title-container {
    padding: var(--okd-dialog-title-box-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
}

.okui-dialog-mobile-mode .okui-dialog-container {
    padding: var(--okd-dialog-container-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
}

.okui-dialog-mobile-mode .okui-dialog-customer-box {
    padding: 0 var(--okd-dialog-container-sm-padding-horizontal)
}

.okui-dialog-mobile-mode .okui-dialog-footer-box {
    padding: var(--okd-dialog-footer-box-sm-padding-top, 12px) var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-footer-box-sm-padding-bottom, 20px)
}

.okui-dialog-mobile-mode .okui-dialog-btn-box .dialog-btn {
    width: 100%
}

.okui-dialog-mobile-mode .okui-dialog-btn-box .dialog-btn+.dialog-btn {
    margin-left: 12px;
    margin-left: var(--okd-dialog-footer-btn-sm-margin-left, 12px)
}

.okui-dialog-mobile-mode .okui-dialog-btn-box.layout-full {
    flex-direction: column-reverse
}

.okui-dialog-mobile-mode .okui-dialog-btn-box.layout-full .dialog-btn+.dialog-btn {
    margin-left: 0
}

.okui-dialog-mobile-mode .okui-dialog-btn-box.layout-full .double-btn:first-child {
    margin-top: 8px;
    margin-top: var(--okd-dialog-footer-btn-full-sm-margin-top, 8px)
}

.okui-dialog-mobile-mode .okui-dialog-window {
    border-radius: 8px;
    border-radius: var(--okd-dialog-window-sm-border-radius, 8px)
}

.okui-dialog-mobile-mode .okui-dialog-window.full-page {
    height: auto !important;
    min-height: calc(100% - 48px) !important
}

.okui-dialog-mobile-mode .okui-dialog-window.full-page-with-show-header {
    height: auto !important
}

.okui-dialog-mobile-mode .okui-dialog-window.bottom-align {
    border-radius: var(--okd-dialog-window-border-radius) var(--okd-dialog-window-border-radius) 0 0;
    bottom: 0;
    top: auto;
    transform: translate(-50%)
}

.okui-dialog-mobile-mode .okui-dialog-window.no-margin {
    min-width: 0;
    min-width: auto;
    width: 100%
}

.okui-dialog-mobile-mode .okui-dialog-container.no-padding,
.okui-dialog-mobile-mode .okui-dialog-customer-box.no-padding {
    padding: 0
}

.okui-dialog-mobile-mode .okui-dialog-window {
    min-width: 0;
    min-width: auto;
    width: calc(100% - 32px)
}

.okui-dialog.okui-action-dialog .okui-dialog-window.no-radius {
    border-radius: 0
}

.okui-dialog-group {
    overflow: hidden
}

.okui-dialog-group-window {
    display: flex;
    flex-direction: column
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-title-box {
    width: 100%
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-title {
    font-size: var(--okd-dialog-tip-title-font-size);
    font-weight: 500;
    line-height: var(--okd-dialog-tip-title-line-height);
    min-height: var(--okd-dialog-tip-title-line-height)
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-detail {
    font-size: var(--okd-dialog-tip-detail-font-size);
    font-weight: 400;
    line-height: var(--okd-dialog-tip-detail-line-height);
    margin-top: 8px
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-detail+.tip-detail {
    margin-top: 2px
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-title {
    color: var(--okd-dialog-tip-title-color)
}

.okui-dialog.okui-tip-dialog .okui-dialog-tip-content .tip-detail {
    color: var(--okd-dialog-tip-detail-color)
}

.okui-dialog.okui-tip-dialog .okui-dialog-footer-box {
    border-top: none
}

@media (max-width:767px) {
    .okui-dialog.okui-tip-dialog .okui-dialog-window.bottom-align {
        border-radius: var(--okd-dialog-window-border-radius);
        bottom: 16px
    }

    .okui-dialog.okui-tip-dialog .okui-dialog-container {
        padding: var(--okd-dialog-tip-container-sm-padding-top, 20px) var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-tip-container-sm-padding-bottom, 24px)
    }

    .okui-dialog.okui-tip-dialog .okui-dialog-footer-box {
        padding: 0 var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-tip-footer-box-sm-padding-vertical) var(--okd-dialog-container-sm-padding-horizontal)
    }
}

@media (min-width:768px) {
    .okui-dialog.okui-tip-dialog .okui-dialog-tip-content {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--okd-dialog-tip-window-min-width)
    }

    .okui-dialog.okui-tip-dialog .okui-dialog-tip-content.two-btn {
        max-width: var(--okd-dialog-tip-window-2btn-min-width)
    }

    .okui-dialog.okui-tip-dialog .okui-dialog-container {
        padding: var(--okd-dialog-tip-container-md-padding-top, 28px) var(--okd-dialog-container-sm-padding-horizontal) var(--okd-dialog-tip-container-md-padding-bottom, 24px)
    }

    .okui-dialog.okui-tip-dialog .okui-dialog-footer-box {
        padding: 0 var(--okd-dialog-container-md-padding-horizontal) var(--okd-dialog-tip-footer-box-md-padding-vertical) var(--okd-dialog-container-md-padding-horizontal)
    }
}

.okui-dialog-tip-icon-bg {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 12px
}

.okui-dialog-tip-icon-bg .tip-icon {
    font-size: var(--okd-dialog-tip-icon-font-size)
}

.okui-dialog-alert-icon {
    margin-top: -6px
}

.okui-dialog .okui-dialog-window-tip {
    background-color: var(--okd-dialog-window-background);
    background-color: var(--okd-dialog-confirm-window-background, var(--okd-dialog-window-background))
}

.okui-dialog.okui-new-tip-dialog .okui-dialog-new-tip-top {
    padding: 24px 24px 0;
    padding: var(--okd-dialog-confirm-title-padding-top, 24px) var(--okd-dialog-confirm-title-padding-horizontal, 24px) var(--okd-dialog-confirm-title-padding-bottom, 0)
}

.okui-dialog.okui-new-tip-dialog .okui-dialog-container.okui-dialog-new-tip-container {
    color: #000;
    color: var(--okd-dialog-confirm-container-color, #000);
    font-size: 14px;
    font-size: var(--okd-dialog-confirm-container-font-size, 14px);
    line-height: 20px;
    line-height: var(--okd-dialog-confirm-container-line-height, 20px)
}

@media (min-width:768px) {
    .okui-dialog.okui-new-tip-dialog .okui-dialog-window {
        max-width: 520px;
        max-width: var(--okd-dialog-confirm-max-width, 520px);
        min-width: 280px;
        min-width: var(--okd-dialog-confirm-min-width, 280px)
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-container.okui-dialog-new-tip-container {
        padding-bottom: 32px;
        padding-bottom: var(--okd-dialog-confirm-container-padding-bottom, 32px);
        padding-top: 32px;
        padding-top: var(--okd-dialog-confirm-container-padding-top, 32px)
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box {
        padding-bottom: 24px;
        padding-bottom: var(--okd-dialog-confirm-footer-padding-bottom, 24px);
        padding-top: 0;
        padding-top: var(--okd-dialog-confirm-footer-padding-top, 0)
    }
}

@media (max-width:767px) {
    .okui-dialog.okui-new-tip-dialog .okui-dialog-window {
        width: calc(100% - 64px)
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-container.okui-dialog-new-tip-container {
        padding: 8px 24px 24px;
        padding: var(--okd-dialog-confirm-container-sm-padding-top, 8px) var(--okd-dialog-confirm-container-sm-padding-horizontal, 24px) var(--okd-dialog-confirm-container-sm-padding-bottom, 24px)
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-container.okui-dialog-no-title {
        padding-top: 24px;
        padding-top: var(--okd-dialog-confirm-no-title-padding-top, 24px)
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer {
        padding: 0
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button {
        border: 0;
        border-radius: 0;
        border-top: thin solid #dbdbdb;
        border-top: thin solid var(--okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb)
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-color {
        color: var(--okd-color-blue-800);
        color: var(--okd-dialog-confirm-footer-sm-button-color, var(--okd-color-blue-800))
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-confirm {
        font-weight: 700
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-cancel {
        font-weight: 400
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-only-one {
        border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) var(--okd-dialog-window-sm-border-radius)
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-top:first-child {
        border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) var(--okd-dialog-window-sm-border-radius);
        margin-top: 0
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-left:first-child {
        border-radius: 0 0 0 var(--okd-dialog-window-sm-border-radius)
    }

    .okui-dialog.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-left+.okui-dialog-tip-border-left {
        border-left: thin solid #dbdbdb;
        border-left: thin solid var(--okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb);
        border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) 0;
        margin-left: 0
    }
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-window {
    width: calc(100% - 64px)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-container.okui-dialog-new-tip-container {
    padding: 8px 24px 24px;
    padding: var(--okd-dialog-confirm-container-sm-padding-top, 8px) var(--okd-dialog-confirm-container-sm-padding-horizontal, 24px) var(--okd-dialog-confirm-container-sm-padding-bottom, 24px)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-container.okui-dialog-no-title {
    padding-top: 24px;
    padding-top: var(--okd-dialog-confirm-no-title-padding-top, 24px)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer {
    padding: 0
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button {
    border: 0;
    border-radius: 0;
    border-top: thin solid #dbdbdb;
    border-top: thin solid var(--okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-color {
    color: var(--okd-color-blue-800);
    color: var(--okd-dialog-confirm-footer-sm-button-color, var(--okd-color-blue-800))
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-confirm {
    font-weight: 700
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-button-cancel {
    font-weight: 400
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-only-one {
    border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) var(--okd-dialog-window-sm-border-radius)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-top:first-child {
    border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) var(--okd-dialog-window-sm-border-radius);
    margin-top: 0
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-left:first-child {
    border-radius: 0 0 0 var(--okd-dialog-window-sm-border-radius)
}

.okui-dialog-mobile-mode.okui-new-tip-dialog .okui-dialog-footer-box.okui-dialog-new-tip-footer .okui-dialog-tip-border-left+.okui-dialog-tip-border-left {
    border-left: thin solid #dbdbdb;
    border-left: thin solid var(--okd-dialog-confirm-footer-sm-button-border-color, #dbdbdb);
    border-radius: 0 0 var(--okd-dialog-window-sm-border-radius) 0;
    margin-left: 0
}

.iconfont.okui-dialog-tip-icon {
    align-self: flex-start;
    font-size: 22px;
    font-size: var(--okd-dialog-confirm-icon-font-size, 22px);
    font-weight: 400;
    line-height: 22px;
    line-height: var(--okd-dialog-confirm-icon-line-height, 22px);
    margin-right: 10px;
    margin-right: var(--okd-dialog-confirm-icon-margin-right, 10px)
}

.okui-dialog-success-icon,
.okui-dialog-success-tip-icon {
    color: var(--okd-dialog-tip-success-icon-color)
}

.okui-dialog-info-icon,
.okui-dialog-info-tip-icon {
    color: var(--okd-dialog-tip-info-icon-color)
}

.okui-dialog-prompt-icon,
.okui-dialog-prompt-tip-icon {
    color: var(--okd-dialog-tip-prompt-icon-color)
}

.okui-dialog-warn-icon,
.okui-dialog-warn-tip-icon {
    color: var(--okd-dialog-tip-warn-icon-color)
}

.okui-dialog-alert-icon,
.okui-dialog-alert-tip-icon {
    color: var(--okd-dialog-tip-alert-icon-color)
}

.okui-dialog-error-icon,
.okui-dialog-error-tip-icon {
    color: var(--okd-dialog-tip-error-icon-color)
}

.okui-dialog .okui-dialog-confirmation-window {
    background-color: var(--okd-dialog-window-background);
    background-color: var(--okd-dialog-confirmation-window-background, var(--okd-dialog-window-background))
}

.okui-dialog-confirmation {
    --inner-okd-dialog-close-btn-padding: 22px
}

.okui-dialog-confirmation-header {
    font-size: 16px;
    font-size: var(--okd-dialog-title-font-size, 16px);
    font-weight: 700;
    font-weight: var(--okd-dialog-title-font-weight, 700);
    line-height: var(--okd-dialog-title-line-height);
    padding: 24px;
    padding: var(--okd-dialog-confirmation-header-padding-top, 24px) var(--okd-dialog-confirmation-padding-right, 24px) var(--okd-dialog-confirmation-header-padding-top, 24px) var(--okd-dialog-confirmation-padding-left, 24px)
}

.okui-dialog-confirmation-header-margin {
    margin-right: 36px
}

.okui-dialog-confirmation-container {
    flex-grow: 1;
    line-height: 22px;
    overflow-y: auto;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-left: var(--okd-dialog-confirmation-padding-left, 24px);
    padding-right: 24px;
    padding-right: var(--okd-dialog-confirmation-padding-right, 24px);
    padding-top: 8px
}

.okui-dialog-confirmation-container-no-header {
    padding-top: 32px;
    padding-top: var(--okd-dialog-confirmation-container-padding-top, 32px)
}

.okui-dialog-confirmation-container-no-footer {
    padding-bottom: 32px;
    padding-bottom: var(--okd-dialog-confirmation-container-padding-bottom, 32px)
}

.okui-dialog-confirmation-footer {
    padding: 24px;
    padding: var(--okd-dialog-confirmation-footer-padding-bottom, 24px) var(--okd-dialog-confirmation-padding-right, 24px) var(--okd-dialog-confirmation-footer-padding-bottom, 24px) var(--okd-dialog-confirmation-padding-left, 24px)
}

.okui-notification-default {
    height: 100vh;
    position: fixed;
    width: 100vw
}

.okui-notification-default,
.okui-notification-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    left: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
    pointer-events: none;
    top: 0
}

.okui-notification-wrap {
    height: 100%;
    position: absolute;
    width: 100%
}

.okui-notification * {
    box-sizing: border-box
}

.okui-notification-container.container-remove {
    animation-duration: .55s;
    animation-name: NotificationOutTop
}

.okui-notification-box {
    animation-duration: .3s;
    background: var(--okd-notification-box-background);
    border: thin solid var(--okd-notification-box-border-color);
    border-radius: var(--okd-notification-box-border-radius);
    box-shadow: var(--okd-notification-box-shadow);
    display: inline-flex;
    line-height: 1;
    margin: calc(var(--okd-notification-box-each-margin)/2) 0;
    max-width: var(--okd-notification-box-max-width);
    min-width: var(--okd-notification-box-min-width);
    overflow: hidden;
    padding: var(--okd-notification-box-padding);
    pointer-events: all;
    position: relative
}

.okui-notification-box.auto-width {
    min-width: var(--okd-notification-box-auto-width-min-width)
}

.okui-notification-box .okui-notification-icon-circle-container {
    display: inline-block;
    height: 20px;
    margin-right: var(--okd-notification-box-icon-text-margin);
    vertical-align: top;
    width: 20px
}

.okui-notification-box .okui-notification-icon-new {
    font-size: 20px;
    height: 100%;
    width: 100%
}

.okui-notification-box .okui-notification-content {
    display: inline-flex;
    flex: 1 1;
    flex-direction: column;
    flex-wrap: wrap;
    word-break: break-word
}

.okui-notification-box .okui-notification-inline {
    flex-direction: row
}

.okui-notification-box .okui-notification-inline .okui-notification-action {
    margin-top: 0;
    width: auto
}

.okui-notification-box .okui-notification-title-box {
    display: inline-flex;
    flex: 1 1;
    flex-direction: column;
    flex-wrap: wrap
}

.okui-notification-box .okui-notification-title {
    color: var(--okd-notification-title-color);
    flex: 1 1;
    flex-shrink: 0;
    font-size: var(--okd-notification-title-font-size);
    font-weight: 500;
    line-height: var(--okd-notification-title-line-height);
    text-align: left
}

.okui-notification-box .okui-notification-desc,
.okui-notification-box .okui-notification-text {
    color: var(--okd-notification-text-color);
    font-size: var(--okd-notification-text-font-size);
    line-height: var(--okd-notification-text-line-height)
}

.okui-notification-box .okui-notification-desc {
    margin-top: 4px;
    text-align: left;
    width: 100%
}

.okui-notification-box .okui-notification-action {
    display: inline-block;
    margin-top: 12px;
    pointer-events: auto;
    text-align: left;
    width: 100%
}

.okui-notification-box .okui-notification-action .action-undo {
    color: var(--okd-notification-action-confirm-btn-color)
}

.okui-notification-box .okui-notification-action .action-dismiss,
.okui-notification-box .okui-notification-action .action-undo {
    cursor: pointer;
    font-size: var(--okd-notification-action-font-size);
    font-weight: 500;
    line-height: var(--okd-notification-action-line-height)
}

.okui-notification-box .okui-notification-action .action-dismiss {
    color: var(--okd-notification-action-cancel-btn-color)
}

.okui-notification-box .okui-notification-action .action-undo+.action-dismiss {
    margin-left: 16px
}

.okui-notification-box .okui-notification-close {
    -webkit-tap-highlight-color: transparent;
    color: var(--okd-notification-box-close-icon-color);
    cursor: pointer;
    font-size: 22px;
    height: 22px;
    margin-left: 15px;
    pointer-events: auto;
    position: relative;
    top: -2px;
    width: 22px
}

.okui-notification-box.success .okui-notification-icon-new {
    color: var(--okd-notification-success-icon-color)
}

.okui-notification-box.info .okui-notification-icon-new {
    color: var(--okd-notification-info-icon-color)
}

.okui-notification-box.warn .okui-notification-icon-new {
    color: var(--okd-notification-warn-icon-color)
}

.okui-notification-box.error .okui-notification-icon-new {
    color: var(--okd-notification-error-icon-color)
}

.okui-notification-box.pending .okui-notification-icon-new {
    color: var(--okd-notification-pending-icon-color)
}

.okui-notification.okui-notification-bottom,
.okui-notification.okui-notification-bottom-left,
.okui-notification.okui-notification-bottom-right {
    justify-content: flex-end
}

.okui-notification.okui-notification-bottom .container-remove,
.okui-notification.okui-notification-bottom-left .container-remove,
.okui-notification.okui-notification-bottom-right .container-remove {
    animation-name: NotificationOutBottom
}

.okui-notification.okui-notification-bottom-right .okui-notification-container,
.okui-notification.okui-notification-top-right .okui-notification-container {
    text-align: right
}

.okui-notification.okui-notification-bottom .okui-notification-container,
.okui-notification.okui-notification-top .okui-notification-container {
    text-align: center
}

.okui-notification.okui-notification-bottom-left .okui-notification-box,
.okui-notification.okui-notification-top-left .okui-notification-box {
    animation-name: NotificationInLeft
}

.okui-notification.okui-notification-bottom-right .okui-notification-box,
.okui-notification.okui-notification-top-right .okui-notification-box {
    animation-name: NotificationInRight
}

.okui-notification.okui-notification-top .okui-notification-box {
    animation-name: NotificationInTop
}

.okui-notification.okui-notification-bottom .okui-notification-box {
    animation-name: NotificationInBottom
}

@media (max-width:767px) {

    .okui-notification.okui-notification-bottom-left .okui-notification-container,
    .okui-notification.okui-notification-bottom-right .okui-notification-container,
    .okui-notification.okui-notification-top-left .okui-notification-container,
    .okui-notification.okui-notification-top-right .okui-notification-container {
        text-align: center
    }

    .okui-notification-box {
        min-width: 0;
        min-width: auto;
        width: 100%
    }

    .okui-notification-box.auto-width {
        width: auto
    }
}

@keyframes NotificationInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-30px, 0, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes NotificationInRight {
    0% {
        opacity: 0;
        transform: translate3d(30px, 0, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes NotificationInTop {
    0% {
        opacity: 0;
        transform: translate3d(0, -30px, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes NotificationInBottom {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes NotificationOutBottom {
    0% {
        max-height: 150px;
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        max-height: 0;
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }
}

@keyframes NotificationOutTop {
    0% {
        max-height: 150px;
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        max-height: 0;
        opacity: 0;
        transform: translate3d(0, -30px, 0)
    }
}

.okui-popup {
    display: inline-flex;
    position: relative;
    width: -moz-fit-content;
    width: fit-content
}

.okui-popup-layer {
    display: none;
    opacity: 0;
    outline: none;
    position: absolute;
    transition: opacity .3s
}

.okui-popup-layer-visible {
    display: block;
    opacity: 1
}

.okui-popup-layer-arrow-inner {
    border: 1px solid transparent;
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    height: 100%;
    transform: rotate(45deg);
    transform-origin: center;
    width: 100%
}

.okui-popup-layer.okui-popup-overflow[data-popper-reference-hidden] {
    pointer-events: none;
    visibility: hidden
}

.okui-popup-white-board .okui-popup-layer-arrow-inner,
.okui-popup-white-board-content {
    background-color: var(--okd-popup-white-board-background);
    border: 1px solid rgba(0, 0, 0, .05)
}

.okui-popup-white-board-content {
    border-radius: 4px;
    box-shadow: var(--okd-popup-white-board-shadow)
}

.okui-popup-placement-lg-top {
    padding-bottom: 9px
}

.okui-popup-placement-lg-bottom {
    padding-top: 9px
}

.okui-popup-placement-lg-left {
    padding-right: 9px
}

.okui-popup-placement-lg-right {
    padding-left: 9px
}

.okui-popup-arrow-lg .okui-popup-layer-arrow {
    height: 14px;
    width: 14px
}

.okui-popup-arrow-lg[data-popper-placement*=top] {
    padding: 0 0 9px
}

.okui-popup-arrow-lg[data-popper-placement*=bottom] {
    padding: 9px 0 0
}

.okui-popup-arrow-lg[data-popper-placement*=left] {
    padding: 0 9px 0 0
}

.okui-popup-arrow-lg[data-popper-placement*=right] {
    padding: 0 0 0 9px
}

.okui-popup-arrow-lg[data-popper-placement*=top] .okui-popup-layer-arrow {
    margin-top: -17px;
    top: 100%
}

.okui-popup-arrow-lg[data-popper-placement*=top] .okui-popup-layer-arrow-inner {
    border-left-color: transparent !important;
    border-top-color: transparent !important
}

.okui-popup-arrow-lg[data-popper-placement*=right] .okui-popup-layer-arrow {
    margin-right: -17px;
    right: 100%
}

.okui-popup-arrow-lg[data-popper-placement*=right] .okui-popup-layer-arrow-inner {
    border-right-color: transparent !important;
    border-top-color: transparent !important
}

.okui-popup-arrow-lg[data-popper-placement*=bottom] .okui-popup-layer-arrow {
    bottom: 100%;
    margin-bottom: -17px
}

.okui-popup-arrow-lg[data-popper-placement*=bottom] .okui-popup-layer-arrow-inner {
    border-bottom-color: transparent !important;
    border-right-color: transparent !important
}

.okui-popup-arrow-lg[data-popper-placement*=left] .okui-popup-layer-arrow {
    left: 100%;
    margin-left: -17px
}

.okui-popup-arrow-lg[data-popper-placement*=left] .okui-popup-layer-arrow-inner {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important
}

.okui-popup-placement-md-top {
    padding-bottom: 7px
}

.okui-popup-placement-md-bottom {
    padding-top: 7px
}

.okui-popup-placement-md-left {
    padding-right: 7px
}

.okui-popup-placement-md-right {
    padding-left: 7px
}

.okui-popup-arrow-md .okui-popup-layer-arrow {
    height: 10px;
    width: 10px
}

.okui-popup-arrow-md[data-popper-placement*=top] {
    padding: 0 0 7px
}

.okui-popup-arrow-md[data-popper-placement*=bottom] {
    padding: 7px 0 0
}

.okui-popup-arrow-md[data-popper-placement*=left] {
    padding: 0 7px 0 0
}

.okui-popup-arrow-md[data-popper-placement*=right] {
    padding: 0 0 0 7px
}

.okui-popup-arrow-md[data-popper-placement*=top] .okui-popup-layer-arrow {
    margin-top: -13px;
    top: 100%
}

.okui-popup-arrow-md[data-popper-placement*=top] .okui-popup-layer-arrow-inner {
    border-left-color: transparent !important;
    border-top-color: transparent !important
}

.okui-popup-arrow-md[data-popper-placement*=right] .okui-popup-layer-arrow {
    margin-right: -13px;
    right: 100%
}

.okui-popup-arrow-md[data-popper-placement*=right] .okui-popup-layer-arrow-inner {
    border-right-color: transparent !important;
    border-top-color: transparent !important
}

.okui-popup-arrow-md[data-popper-placement*=bottom] .okui-popup-layer-arrow {
    bottom: 100%;
    margin-bottom: -13px
}

.okui-popup-arrow-md[data-popper-placement*=bottom] .okui-popup-layer-arrow-inner {
    border-bottom-color: transparent !important;
    border-right-color: transparent !important
}

.okui-popup-arrow-md[data-popper-placement*=left] .okui-popup-layer-arrow {
    left: 100%;
    margin-left: -13px
}

.okui-popup-arrow-md[data-popper-placement*=left] .okui-popup-layer-arrow-inner {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important
}

.okui-tooltip .okui-popup-layer-content {
    word-wrap: break-word;
    border-radius: 2px;
    color: var(--okd-tooltip-default-font-color);
    font-size: 12px;
    line-height: 16px;
    max-width: 160px;
    padding: 8px
}

.okui-tooltip .okui-popup-layer-arrow-inner,
.okui-tooltip .okui-popup-layer-content {
    background-color: var(--okd-tooltip-neutral-background)
}

.okui-tooltip-negative .okui-popup-layer-arrow-inner,
.okui-tooltip-negative .okui-popup-layer-content {
    background-color: var(--okd-tooltip-negative-background)
}

.okui-tooltip-positive .okui-popup-layer-arrow-inner,
.okui-tooltip-positive .okui-popup-layer-content {
    background-color: var(--okd-tooltip-positive-background)
}

.okui-tooltip-informative .okui-popup-layer-arrow-inner,
.okui-tooltip-informative .okui-popup-layer-content {
    background-color: var(--okd-tooltip-informative-background)
}

.okui-checkbox-wrapper-indeterminate .okui-checkbox-inner {
    background-color: var(--okd-checkbox-selected-background);
    border-color: var(--okd-checkbox-selected-border-color)
}

.okui-checkbox-wrapper-indeterminate .okui-checkbox-inner:after {
    background-color: var(--okd-checkbox-selected-inner-color);
    box-sizing: border-box;
    content: " ";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
    width: 10px
}

.okui-checkbox-wrapper.okui-checkbox-circular .okui-checkbox-inner,
.okui-checkbox-wrapper.okui-checkbox-circular .okui-checkbox-input {
    border-radius: 50px
}

.okui-checkbox-inner {
    background-color: var(--okd-checkbox-default-background);
    border: 1px solid var(--okd-checkbox-default-border-color);
    border-radius: var(--okd-checkbox-common-border-radius);
    box-shadow: var(--okd-checkbox-default-shadow);
    box-sizing: border-box;
    cursor: pointer;
    direction: ltr;
    display: block;
    height: 12px;
    left: 0;
    position: relative;
    top: 0;
    width: 12px
}

.okui-checkbox-input {
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 1
}

.okui-checkbox-input:focus-visible {
    border-radius: var(--okd-checkbox-common-border-radius);
    opacity: 1;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-checkbox-children {
    cursor: pointer;
    display: inline-block;
    font-size: var(--okd-checkbox-common-label-font-size);
    margin-left: 4px;
    vertical-align: top;
    white-space: normal;
    word-break: break-word
}

.okui-checkbox-wrapper {
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    margin-right: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap
}

.okui-checkbox-wrapper .okui-checkbox-children {
    color: var(--okd-checkbox-default-text-color)
}

.okui-checkbox-wrapper .okui-checkbox {
    cursor: pointer;
    display: inline-block;
    margin-top: 2px;
    position: relative;
    vertical-align: top
}

.okui-checkbox-wrapper.hover-status .okui-checkbox-inner {
    border-color: var(--okd-checkbox-default-hover-border-color);
    box-shadow: var(--okd-checkbox-default-hover-shadow)
}

.okui-checkbox-wrapper-checked .okui-checkbox-children {
    color: var(--okd-checkbox-selected-text-color)
}

.okui-checkbox-wrapper-checked .okui-checkbox-inner {
    background-color: var(--okd-checkbox-selected-background);
    border-color: var(--okd-checkbox-selected-border-color);
    box-shadow: var(--okd-checkbox-selected-shadow)
}

.okui-checkbox-wrapper-checked .okui-checkbox-inner:after {
    background-color: transparent;
    border: 2px solid var(--okd-checkbox-selected-inner-color);
    border-left: 0;
    border-top: 0;
    box-sizing: border-box;
    content: " ";
    height: 8px;
    left: 50%;
    position: absolute;
    top: calc(50% - 1px);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: transform .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
    width: 5px
}

.okui-checkbox-wrapper-checked.hover-status .okui-checkbox-inner {
    border-color: var(--okd-checkbox-selected-hover-border-color);
    box-shadow: var(--okd-checkbox-selected-hover-shadow)
}

.okui-checkbox-wrapper-error .okui-checkbox-children {
    color: var(--okd-checkbox-error-text-color)
}

.okui-checkbox-wrapper-error .okui-checkbox-inner {
    border-color: var(--okd-checkbox-error-border-color);
    box-shadow: var(--okd-checkbox-error-shadow)
}

.okui-checkbox-wrapper-error.hover-status .okui-checkbox-inner {
    border-color: var(--okd-checkbox-error-hover-border-color);
    box-shadow: var(--okd-checkbox-error-hover-shadow)
}

.okui-checkbox-wrapper-error.okui-checkbox-wrapper-checked .okui-checkbox-inner {
    background-color: var(--okd-checkbox-error-background);
    border-color: var(--okd-checkbox-error-border-color)
}

.okui-checkbox-wrapper-error.okui-checkbox-wrapper-checked .okui-checkbox-inner:after {
    border-color: var(--okd-checkbox-error-inner-color)
}

.okui-checkbox-wrapper-disabled {
    cursor: not-allowed
}

.okui-checkbox-wrapper-disabled .okui-checkbox-children {
    color: var(--okd-checkbox-disabled-text-color);
    cursor: not-allowed
}

.okui-checkbox-wrapper-disabled .okui-checkbox,
.okui-checkbox-wrapper-disabled .okui-checkbox .okui-checkbox-input {
    cursor: default
}

.okui-checkbox-wrapper-disabled .okui-checkbox .okui-checkbox-inner {
    background-color: var(--okd-checkbox-disabled-background);
    border-color: var(--okd-checkbox-disabled-border-color);
    cursor: default
}

.okui-checkbox-wrapper-disabled.hover-status .okui-checkbox-inner {
    border-color: var(--okd-checkbox-disabled-hover-border-color);
    box-shadow: none
}

.okui-checkbox-wrapper-disabled.okui-checkbox-wrapper-checked .okui-checkbox-inner {
    background-color: var(--okd-checkbox-disabled-background);
    border-color: var(--okd-checkbox-disabled-border-color)
}

.okui-checkbox-wrapper-disabled.okui-checkbox-wrapper-checked .okui-checkbox-inner:after {
    border-color: var(--okd-checkbox-disabled-inner-color)
}

.okui-checkbox-wrapper-disabled.okui-checkbox-wrapper-indeterminate .okui-checkbox-inner {
    background-color: var(--okd-checkbox-disabled-background);
    border-color: var(--okd-checkbox-disabled-border-color)
}

.okui-checkbox-wrapper-disabled.okui-checkbox-wrapper-indeterminate .okui-checkbox-inner:after {
    background-color: var(--okd-checkbox-disabled-inner-color)
}

.okui-checkbox-sm .okui-checkbox-inner {
    border-radius: 2px;
    border-radius: var(--okd-checkbox-sm-border-radius, 2px);
    height: var(--okd-checkbox-sm-height);
    width: var(--okd-checkbox-sm-width)
}

.okui-checkbox-sm .okui-checkbox-children {
    font-size: var(--okd-checkbox-sm-font-size);
    margin-left: var(--okd-checkbox-sm-margin)
}

.okui-checkbox-sm.okui-checkbox-wrapper {
    line-height: var(--okd-checkbox-sm-line-height);
    padding-bottom: var(--okd-checkbox-sm-padding);
    padding-top: var(--okd-checkbox-sm-padding)
}

.okui-checkbox-md .okui-checkbox-inner {
    border-radius: 4px;
    border-radius: var(--okd-checkbox-md-border-radius, 4px);
    height: var(--okd-checkbox-md-height);
    width: var(--okd-checkbox-md-width)
}

.okui-checkbox-md .okui-checkbox-children {
    font-size: var(--okd-checkbox-md-font-size);
    margin-left: var(--okd-checkbox-md-margin)
}

.okui-checkbox-md.okui-checkbox-wrapper {
    line-height: var(--okd-checkbox-md-line-height);
    padding-bottom: var(--okd-checkbox-md-padding);
    padding-top: var(--okd-checkbox-md-padding)
}

@media (min-width:768px) {

    .okui-checkbox-wrapper-disabled.okui-checkbox-wrapper-checked:hover .okui-checkbox-inner,
    .okui-checkbox-wrapper-disabled:hover .okui-checkbox-inner {
        border-color: var(--okd-checkbox-disabled-hover-border-color);
        box-shadow: none
    }

    .okui-checkbox-wrapper:not(.okui-checkbox-wrapper-disabled):hover .okui-checkbox-inner {
        border-color: var(--okd-checkbox-default-hover-border-color);
        box-shadow: var(--okd-checkbox-default-hover-shadow)
    }

    .okui-checkbox-wrapper-checked:not(.okui-checkbox-wrapper-disabled):hover .okui-checkbox-inner {
        border-color: var(--okd-checkbox-selected-hover-border-color);
        box-shadow: var(--okd-checkbox-selected-hover-shadow)
    }

    .okui-checkbox-wrapper-error:not(.okui-checkbox-wrapper-disabled):hover .okui-checkbox-inner {
        border-color: var(--okd-checkbox-error-hover-border-color);
        box-shadow: var(--okd-checkbox-error-hover-shadow)
    }
}

.okui-checkbox-reversed.okui-checkbox-wrapper-indeterminate .okui-checkbox-inner {
    background-color: var(--okd-checkbox-reversed-selected-background);
    border-color: var(--okd-checkbox-reversed-selected-border-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-indeterminate .okui-checkbox-inner:after {
    background-color: var(--okd-checkbox-reversed-selected-inner-color)
}

.okui-checkbox-reversed .okui-checkbox-inner {
    background-color: var(--okd-checkbox-reversed-default-background);
    border-color: var(--okd-checkbox-reversed-default-border-color);
    box-shadow: var(--okd-checkbox-reversed-default-shadow)
}

.okui-checkbox-reversed.okui-checkbox-wrapper .okui-checkbox-children {
    color: var(--okd-checkbox-reversed-default-text-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper.hover-status .okui-checkbox-inner,
.okui-checkbox-reversed.okui-checkbox-wrapper:hover .okui-checkbox-inner {
    border-color: var(--okd-checkbox-reversed-default-hover-border-color);
    box-shadow: var(--okd-checkbox-reversed-default-hover-shadow)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-checked .okui-checkbox-children {
    color: var(--okd-checkbox-reversed-selected-text-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-checked .okui-checkbox-inner {
    background-color: var(--okd-checkbox-reversed-selected-background);
    border-color: var(--okd-checkbox-reversed-selected-border-color);
    box-shadow: var(--okd-checkbox-reversed-selected-shadow)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-checked .okui-checkbox-inner:after {
    border-color: var(--okd-checkbox-reversed-selected-inner-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-checked.hover-status .okui-checkbox-inner,
.okui-checkbox-reversed.okui-checkbox-wrapper-checked:hover .okui-checkbox-inner {
    border-color: var(--okd-checkbox-reversed-selected-hover-border-color);
    box-shadow: var(--okd-checkbox-reversed-selected-hover-shadow)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-error .okui-checkbox-children {
    color: var(--okd-checkbox-reversed-error-text-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-error .okui-checkbox-inner {
    border-color: var(--okd-checkbox-reversed-error-border-color);
    box-shadow: var(--okd-checkbox-reversed-error-shadow)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-error.hover-status .okui-checkbox-inner,
.okui-checkbox-reversed.okui-checkbox-wrapper-error:hover .okui-checkbox-inner {
    border-color: var(--okd-checkbox-reversed-error-hover-border-color);
    box-shadow: var(--okd-checkbox-reversed-error-hover-shadow)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-error.okui-checkbox-wrapper-checked .okui-checkbox-inner {
    background-color: var(--okd-checkbox-reversed-error-background);
    border-color: var(--okd-checkbox-reversed-error-border-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-error.okui-checkbox-wrapper-checked .okui-checkbox-inner:after {
    border-color: var(--okd-checkbox-reversed-error-inner-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-disabled .okui-checkbox-children {
    color: var(--okd-checkbox-reversed-disabled-text-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-disabled .okui-checkbox .okui-checkbox-inner {
    background-color: var(--okd-checkbox-reversed-disabled-background);
    border-color: var(--okd-checkbox-reversed-disabled-border-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-disabled.hover-status .okui-checkbox-inner,
.okui-checkbox-reversed.okui-checkbox-wrapper-disabled:hover .okui-checkbox-inner {
    border-color: var(--okd-checkbox-reversed-disabled-hover-border-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-disabled.okui-checkbox-wrapper-checked .okui-checkbox-inner {
    background-color: var(--okd-checkbox-reversed-disabled-background);
    border-color: var(--okd-checkbox-reversed-disabled-border-color)
}

.okui-checkbox-reversed.okui-checkbox-wrapper-disabled.okui-checkbox-wrapper-checked .okui-checkbox-inner:after {
    border-color: var(--okd-checkbox-reversed-disabled-inner-color)
}

.okui-checkbox-circle {
    align-items: center;
    background-color: transparent;
    background-color: var(--okd-checkbox-circle-default-background-color, transparent);
    border: 1px solid #dbdbdb;
    border: 1px solid var(--okd-checkbox-circle-default-border-color, #dbdbdb);
    border-radius: 100%;
    cursor: pointer;
    display: inline-block;
    height: 18px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 18px
}

.okui-checkbox-circle:after {
    background-color: transparent;
    border: 2px solid #fff;
    border: 2px solid var(--okd-checkbox-circle-inner-color, #fff);
    border-left: 0;
    border-top: 0;
    box-sizing: border-box;
    content: " ";
    display: none;
    height: 8px;
    left: 50%;
    position: absolute;
    top: calc(50% - 1px);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: transform .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
    width: 5px
}

.okui-checkbox-circle-checked {
    background-color: #000;
    background-color: var(--okd-checkbox-circle-checked-background-color, #000);
    border-color: #000;
    border-color: var(--okd-checkbox-circle-checked-border-color, #000)
}

.okui-checkbox-circle-checked .okui-checkbox-circle-icon {
    visibility: visible
}

.okui-checkbox-circle-checked:after {
    display: block
}

.okui-checkbox-circle-disabled {
    background-color: #f9f9f9;
    background-color: var(--okd-checkbox-circle-default-disabled-background-color, #f9f9f9);
    border-color: #ebebeb;
    border-color: var(--okd-checkbox-circle-default-disabled-border-color, #ebebeb);
    cursor: not-allowed
}

.okui-checkbox-circle-disabled.okui-checkbox-circle-checked {
    background-color: #bdbdbd;
    background-color: var(--okd-checkbox-circle-checked-disabled-background-color, #bdbdbd);
    border-color: #bdbdbd;
    border-color: var(--okd-checkbox-circle-checked-disabled-border-color, #bdbdbd)
}

.okui-plain-button {
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: inherit
}

.okui-plain-button:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-plain-button[disabled] {
    cursor: not-allowed
}

.okui-plain-button-as-div {
    display: block;
    line-height: inherit;
    width: 100%
}

.okui-animation {
    position: relative
}

.okui-animation-poster {
    left: 0;
    position: absolute;
    top: 0
}

.okui-animation-view {
    height: 100%;
    width: 100%
}

.okui-result {
    background-color: var(--okd-color-background-base-primary);
    background-color: var(--okd-result-background-color, var(--okd-color-background-base-primary))
}

.okui-result-animation {
    margin: auto
}

.okui-result-title {
    color: var(--okd-color-content-primary);
    color: var(--okd-result-title-color, var(--okd-color-content-primary));
    font-size: 24px;
    font-size: var(--okd-result-title-sm-font-size, 24px);
    font-weight: 700;
    font-weight: var(--okd-result-title-sm-font-weight, 700);
    line-height: 28px;
    line-height: var(--okd-result-title-sm-line-height, 28px);
    text-align: center
}

.okui-result-desc {
    color: var(--okd-color-content-secondary);
    color: var(--okd-result-desc-color, var(--okd-color-content-secondary));
    font-size: 14px;
    font-size: var(--okd-result-desc-sm-font-size, 14px);
    line-height: 22px;
    line-height: var(--okd-result-desc-sm-line-height, 22px);
    margin-top: 16px;
    margin-top: var(--okd-result-desc-sm-margin-top, 16px);
    text-align: center
}

.okui-result-extra {
    margin-top: 24px;
    margin-top: var(--okd-result-extra-sm-margin-top, 24px);
    text-align: center
}

.okui-result-animation-sm {
    height: 136px;
    height: var(--okd-result-sm-height, 136px);
    width: 136px;
    width: var(--okd-result-sm-width, 136px)
}

.okui-result-animation-lg {
    height: 216px;
    height: var(--okd-result-lg-height, 216px);
    width: 216px;
    width: var(--okd-result-lg-width, 216px)
}

.okui-input-reversed .okui-input-box {
    background: var(--okd-input-reversed-default-background);
    border: thin solid var(--okd-input-reversed-default-border-color);
    box-shadow: var(--okd-input-reversed-default-shadow);
    transition: border-color .3s, box-shadow .3s
}

.okui-input-reversed .okui-input-input {
    color: var(--okd-input-reversed-default-text-color)
}

.okui-input-reversed .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-default-placeholder-color);
    color: var(--okd-input-reversed-default-placeholder-color)
}

.okui-input-reversed .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-default-placeholder-color);
    color: var(--okd-input-reversed-default-placeholder-color);
    opacity: 1
}

.okui-input-reversed .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-default-placeholder-color);
    color: var(--okd-input-reversed-default-placeholder-color)
}

.okui-input-reversed .okui-input-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-reversed-default-text-color) !important;
    border: none;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-reversed-default-background) inset
}

.okui-input-reversed .okui-input-error {
    color: var(--okd-input-reversed-error-tips-color)
}

.okui-input-reversed .okui-input-help-text,
.okui-input-reversed .okui-input-tips {
    color: var(--okd-input-reversed-tips-text-color)
}

.okui-input.okui-input-reversed.hover .okui-input-box,
.okui-input.okui-input-reversed:hover .okui-input-box {
    background: var(--okd-input-reversed-hover-background);
    border: thin solid var(--okd-input-reversed-hover-border-color);
    box-shadow: var(--okd-input-reversed-hover-shadow)
}

.okui-input.okui-input-reversed.hover .okui-input-box .okui-input-input,
.okui-input.okui-input-reversed:hover .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-reversed-hover-text-color);
    caret-color: var(--okd-input-reversed-hover-caret-color);
    color: var(--okd-input-reversed-hover-text-color)
}

.okui-input.okui-input-reversed.hover .okui-input-box .okui-input-input::-webkit-input-placeholder,
.okui-input.okui-input-reversed:hover .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-hover-placeholder-color);
    color: var(--okd-input-reversed-hover-placeholder-color)
}

.okui-input.okui-input-reversed.hover .okui-input-box .okui-input-input:-moz-placeholder,
.okui-input.okui-input-reversed:hover .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-hover-placeholder-color);
    color: var(--okd-input-reversed-hover-placeholder-color);
    opacity: 1
}

.okui-input.okui-input-reversed.hover .okui-input-box .okui-input-input::-ms-input-placeholder,
.okui-input.okui-input-reversed:hover .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-hover-placeholder-color);
    color: var(--okd-input-reversed-hover-placeholder-color)
}

.okui-input.okui-input-reversed.focus .okui-input-box {
    background: var(--okd-input-reversed-focus-background);
    border: thin solid var(--okd-input-reversed-focus-border-color);
    box-shadow: var(--okd-input-reversed-focus-shadow)
}

.okui-input.okui-input-reversed.focus .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-reversed-focus-text-color);
    caret-color: var(--okd-input-reversed-focus-caret-color);
    color: var(--okd-input-reversed-focus-text-color)
}

.okui-input.okui-input-reversed.focus .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-focus-placeholder-color);
    color: var(--okd-input-reversed-focus-placeholder-color)
}

.okui-input.okui-input-reversed.focus .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-focus-placeholder-color);
    color: var(--okd-input-reversed-focus-placeholder-color);
    opacity: 1
}

.okui-input.okui-input-reversed.focus .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-focus-placeholder-color);
    color: var(--okd-input-reversed-focus-placeholder-color)
}

.okui-input.okui-input-reversed.disabled .okui-input-box {
    background: var(--okd-input-reversed-disabled-background);
    border: thin solid var(--okd-input-reversed-disabled-border-color);
    box-shadow: var(--okd-input-reversed-disabled-shadow)
}

.okui-input.okui-input-reversed.disabled .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-text-color);
    caret-color: var(--okd-input-reversed-disabled-caret-color);
    color: var(--okd-input-reversed-disabled-text-color)
}

.okui-input.okui-input-reversed.disabled .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-placeholder-color);
    color: var(--okd-input-reversed-disabled-placeholder-color)
}

.okui-input.okui-input-reversed.disabled .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-placeholder-color);
    color: var(--okd-input-reversed-disabled-placeholder-color);
    opacity: 1
}

.okui-input.okui-input-reversed.disabled .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-placeholder-color);
    color: var(--okd-input-reversed-disabled-placeholder-color)
}

.okui-input.okui-input-reversed.disabled .okui-input-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-reversed-disabled-text-color) !important;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-reversed-disabled-background) inset
}

.okui-input.okui-input-reversed.error .okui-input-box {
    background: var(--okd-input-reversed-error-background);
    border: thin solid var(--okd-input-reversed-error-border-color);
    box-shadow: var(--okd-input-reversed-error-shadow)
}

.okui-input.okui-input-reversed.error .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-reversed-error-text-color);
    caret-color: var(--okd-input-reversed-error-caret-color);
    color: var(--okd-input-reversed-error-text-color)
}

.okui-input.okui-input-reversed.error .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-error-placeholder-color);
    color: var(--okd-input-reversed-error-placeholder-color)
}

.okui-input.okui-input-reversed.error .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-error-placeholder-color);
    color: var(--okd-input-reversed-error-placeholder-color);
    opacity: 1
}

.okui-input.okui-input-reversed.error .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-reversed-error-placeholder-color);
    color: var(--okd-input-reversed-error-placeholder-color)
}

.okui-label-reversed .okui-label-text {
    color: var(--okd-input-reversed-label-color)
}

.okui-label-reversed .okui-label-action {
    color: var(--okd-input-reversed-action-color)
}

.okui-input-reversed .okui-input-prefix .prefix-icon,
.okui-input-reversed .okui-input-suffix .suffix-icon,
.okui-input-reversed .okui-input-suffix .suffix-icon:hover {
    color: var(--okd-input-reversed-icon-color)
}

.okui-input-reversed .okui-input-suffix .error-icon {
    color: var(--okd-input-reversed-error-tips-color)
}

.okui-input-reversed .okui-input-number-suffix {
    border-left: 1px solid var(--okd-input-reversed-default-border-color)
}

.okui-input-reversed .okui-input-number-suffix-part {
    background: var(--okd-input-number-reversed-default-add-icon-background)
}

.okui-input-reversed .okui-input-number-suffix-part .icon {
    color: var(--okd-input-number-reversed-default-add-icon-color)
}

.okui-input-reversed .okui-input-number-suffix-part .hover,
.okui-input-reversed .okui-input-number-suffix-part:hover {
    background: var(--okd-input-number-reversed-hover-add-icon-background)
}

.okui-input-reversed .okui-input-number-suffix-part .hover .icon,
.okui-input-reversed .okui-input-number-suffix-part:hover .icon {
    color: var(--okd-input-number-reversed-hover-add-icon-color)
}

.okui-input-reversed .okui-input-number-suffix-part .active,
.okui-input-reversed .okui-input-number-suffix-part:active {
    background: var(--okd-input-number-reversed-active-add-icon-background)
}

.okui-input-reversed .okui-input-number-suffix-part .active .icon,
.okui-input-reversed .okui-input-number-suffix-part:active .icon {
    color: var(--okd-input-number-reversed-active-add-icon-color)
}

.okui-input-reversed .okui-input-number-suffix-part .disabled,
.okui-input-reversed .okui-input-number-suffix-part-disabled {
    background: var(--okd-input-number-reversed-disabled-add-icon-background)
}

.okui-input-reversed .okui-input-number-suffix-part .disabled .icon,
.okui-input-reversed .okui-input-number-suffix-part .disabled:hover .icon,
.okui-input-reversed .okui-input-number-suffix-part-disabled .icon,
.okui-input-reversed .okui-input-number-suffix-part-disabled:hover .icon {
    color: var(--okd-input-number-reversed-disabled-add-icon-color)
}

.okui-input-reversed .okui-input-number-suffix-line {
    background: var(--okd-input-reversed-default-border-color)
}

.okui-steps {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: inherit;
    display: flex;
    font-family: inherit;
    font-weight: 500;
    justify-content: center;
    margin-bottom: 0;
    outline: none;
    position: relative;
    text-decoration: none;
    touch-action: manipulation;
    transition: all .3s cubic-bezier(.165, .84, .44, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

.okui-steps-item {
    display: inline-block;
    flex: 1 1;
    overflow: hidden;
    position: relative;
    vertical-align: top
}

.okui-steps-item-button {
    width: 100%
}

.okui-steps-item-container {
    outline: none
}

.okui-steps-item:last-child {
    flex: none
}

.okui-steps-item:last-child>.okui-steps-item-content:after,
.okui-steps-item:last-child>.okui-steps-item-tail {
    display: none
}

.okui-steps-item-content,
.okui-steps-item-icon {
    display: inline-block;
    vertical-align: top
}

.okui-steps-item-content {
    margin-left: var(--okd-steps-horizontal-content-margin-left);
    position: relative
}

.okui-steps-item-content:after {
    background-image: linear-gradient(270deg, transparent 0, transparent 50%, #dbdbdb 0, #dbdbdb);
    background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--okd-steps-process-tail-color, #dbdbdb) 50%, var(--okd-steps-process-tail-color, #dbdbdb) 100%);
    background-repeat: repeat-x;
    background-size: 4px 1px;
    background-size: var(--okd-steps-common-waiting-border-width, 4px) 1px;
    content: "";
    display: block;
    height: 1px;
    left: 100%;
    position: absolute;
    top: 10px;
    width: 9999px
}

.okui-steps-item-content-no-left {
    margin-left: 0
}

.okui-steps-item-icon {
    align-items: center;
    border: 1px solid;
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-flex;
    font-size: var(--okd-steps-common-icon-font-size);
    height: var(--okd-steps-common-icon-size);
    justify-content: center;
    line-height: var(--okd-steps-common-icon-size);
    text-align: center;
    transition: background-color .3s, border-color .3s;
    width: var(--okd-steps-common-icon-size)
}

.okui-steps-item-icon .okui-steps-item-icon-num {
    font-weight: 500;
    line-height: 1;
    position: relative
}

.okui-steps-item-icon .okui-steps-item-icon-num,
.okui-steps-item-icon .okui-steps-item-icon-num .okui-steps-item-checkmark {
    font-size: var(--okd-steps-common-icon-font-size)
}

.okui-steps-item-tail {
    height: 1px;
    line-height: 0;
    position: absolute;
    top: calc(var(--okd-steps-common-icon-size)/2);
    width: 100%
}

.okui-steps-item-tail:after {
    background-image: linear-gradient(270deg, transparent 0, transparent 50%, #dbdbdb 0, #dbdbdb);
    background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--okd-steps-process-tail-color, #dbdbdb) 50%, var(--okd-steps-process-tail-color, #dbdbdb) 100%);
    background-repeat: repeat-x;
    background-size: 4px 1px;
    background-size: var(--okd-steps-common-waiting-border-width, 4px) 1px;
    border-radius: 1px;
    content: "";
    display: inline-block;
    height: 1px;
    position: absolute;
    top: 0;
    width: 100%
}

.okui-steps-item-title {
    display: inline-block;
    font-size: var(--okd-steps-common-title-font-size);
    line-height: 20px;
    line-height: var(--okd-steps-common-title-line-height, 20px);
    padding-right: 12px;
    position: relative
}

.okui-steps-item-description {
    font-size: var(--okd-steps-common-description-font-size);
    line-height: 16px;
    line-height: var(--okd-steps-common-description-line-height, 16px);
    margin-top: 2px
}

.okui-steps-item.okui-steps-item-finish .okui-steps-item-content:after,
.okui-steps-item.okui-steps-item-finish .okui-steps-item-tail:after {
    background-color: #000;
    background-color: var(--okd-steps-finish-tail-color, #000);
    background-image: none
}

.okui-steps-item-process .okui-steps-item-icon {
    background: var(--okd-steps-process-background);
    border: 1px solid #000;
    border: 1px solid var(--okd-steps-process-icon-border-color, #000)
}

.okui-steps-item-process .okui-steps-item-icon-num {
    color: var(--okd-steps-process-icon-color)
}

.okui-steps-item-process .okui-steps-item-title {
    color: var(--okd-steps-process-title-color)
}

.okui-steps-item-process .okui-steps-item-description {
    color: var(--okd-steps-process-description-color);
    font-weight: 400
}

.okui-steps-item-waiting .okui-steps-item-icon {
    background: var(--okd-steps-waiting-background);
    border: 1px solid #dbdbdb;
    border: 1px solid var(--okd-steps-waiting-icon-border-color, #dbdbdb)
}

.okui-steps-item-waiting .okui-steps-item-icon-num {
    color: var(--okd-steps-waiting-icon-color)
}

.okui-steps-item-waiting .okui-steps-item-title {
    color: var(--okd-steps-waiting-title-color)
}

.okui-steps-item-waiting .okui-steps-item-description {
    color: var(--okd-steps-waiting-description-color);
    font-weight: 400
}

.okui-steps-item-finish .okui-steps-item-icon {
    background: var(--okd-steps-finish-background);
    border: 1px solid #1a1a1a;
    border: 1px solid var(--okd-steps-finish-icon-border-color, #1a1a1a)
}

.okui-steps-item-finish .okui-steps-item-icon-num {
    color: var(--okd-steps-finish-icon-color)
}

.okui-steps-item-finish .okui-steps-item-title {
    color: var(--okd-steps-finish-title-color)
}

.okui-steps-item-finish .okui-steps-item-description {
    color: var(--okd-steps-finish-description-color);
    font-weight: 400
}

.okui-steps-horizontal:not(.okui-steps-label-vertical):not(.okui-steps-label-vertical-left) .okui-steps-item {
    margin-right: 16px;
    white-space: nowrap
}

.okui-steps-horizontal:not(.okui-steps-label-vertical):not(.okui-steps-label-vertical-left) .okui-steps-item-container {
    display: flex
}

.okui-steps-horizontal:not(.okui-steps-label-vertical):not(.okui-steps-label-vertical-left) .okui-steps-item:last-child {
    margin-right: 0
}

.okui-steps-horizontal:not(.okui-steps-label-vertical):not(.okui-steps-label-vertical-left) .okui-steps-item:last-child .okui-steps-item-title {
    padding-right: 0
}

.okui-steps-horizontal:not(.okui-steps-label-vertical):not(.okui-steps-label-vertical-left) .okui-steps-item-tail {
    display: none
}

.okui-steps-horizontal:not(.okui-steps-label-vertical):not(.okui-steps-label-vertical-left) .okui-steps-item-description {
    max-width: var(--okd-steps-label-vertical-description-max-width);
    white-space: normal
}

.okui-steps-vertical {
    display: flex;
    flex-direction: column
}

.okui-steps-vertical .okui-steps-item {
    display: block;
    flex: 1 0 auto;
    overflow: visible
}

.okui-steps-vertical .okui-steps-item-container {
    min-height: 72px
}

.okui-steps-vertical .okui-steps-item-container:last-child {
    min-height: 0;
    min-height: auto
}

.okui-steps-vertical .okui-steps-item-icon {
    float: left;
    margin-right: var(--okd-steps-vertical-icon-margin-right)
}

.okui-steps-vertical .okui-steps-item-content {
    display: block;
    margin-left: var(--okd-steps-vertical-content-margin-left)
}

.okui-steps-vertical .okui-steps-item-content:after {
    display: none
}

.okui-steps-vertical .okui-steps-item-title {
    margin-top: 1px
}

.okui-steps-vertical .okui-steps-item-description {
    padding-bottom: var(--okd-steps-vertical-description-padding-bottom)
}

.okui-steps-vertical .okui-steps-item-tail {
    bottom: 12px;
    height: calc(100% - var(--okd-steps-common-icon-size));
    left: calc(var(--okd-steps-common-icon-size)/2);
    padding: 0;
    position: absolute;
    top: var(--okd-steps-common-icon-size);
    width: 1px
}

.okui-steps-vertical .okui-steps-item-tail:after {
    background-image: linear-gradient(180deg, transparent 0, transparent 50%, #dbdbdb 0, #dbdbdb);
    background-image: linear-gradient(to bottom, transparent 0, transparent 50%, var(--okd-steps-process-tail-color, #dbdbdb) 50%, var(--okd-steps-process-tail-color, #dbdbdb) 100%);
    background-repeat: repeat-y;
    background-size: 1px 4px;
    background-size: 1px var(--okd-steps-common-waiting-border-width, 4px);
    height: 100%;
    width: 1px
}

.okui-steps-vertical .okui-steps-item:not(:last-child) .okui-steps-item-tail {
    display: block
}

.okui-steps-vertical .okui-steps-item .okui-steps-item-content:after {
    display: none
}

.okui-steps-vertical .okui-steps-item-finish .okui-steps-item-tail:after {
    background-color: #000;
    background-color: var(--okd-steps-finish-tail-color, #000);
    background-image: none
}

.okui-steps-label-vertical .okui-steps-item {
    overflow: visible
}

.okui-steps-label-vertical .okui-steps-item-tail {
    margin-left: calc(var(--okd-steps-common-icon-size) + var(--okd-steps-style-margin-left, 42px));
    padding: 0
}

.okui-steps-label-vertical .okui-steps-item-tail:after {
    width: calc(100% - var(--okd-steps-common-icon-size))
}

.okui-steps-label-vertical .okui-steps-item-content {
    display: block;
    margin-left: 0;
    margin-top: var(--okd-steps-label-vertical-content-margin-top);
    text-align: center;
    width: calc(var(--okd-steps-common-icon-size)/2*2 + 84px);
    width: calc((var(--okd-steps-common-icon-size)/2 + var(--okd-steps-style-margin-left, 42px))*2)
}

.okui-steps-label-vertical .okui-steps-item-content:after {
    display: none
}

.okui-steps-label-vertical .okui-steps-item-icon {
    display: inline-flex;
    margin-left: 42px;
    margin-left: var(--okd-steps-style-margin-left, 42px)
}

.okui-steps-label-vertical .okui-steps-item-title {
    padding-left: 0;
    padding-right: 0
}

.okui-steps-label-vertical-left .okui-steps-item {
    overflow: visible
}

.okui-steps-label-vertical-left .okui-steps-item-tail {
    margin-left: 0;
    padding: 0
}

.okui-steps-label-vertical-left .okui-steps-item-tail:after {
    left: var(--okd-steps-common-icon-size);
    width: calc(100% - var(--okd-steps-common-icon-size))
}

.okui-steps-label-vertical-left .okui-steps-item-content {
    display: block;
    margin-left: 0;
    margin-top: var(--okd-steps-label-vertical-content-margin-top);
    text-align: left;
    width: calc(var(--okd-steps-common-icon-size)/2*2 + 84px);
    width: calc((var(--okd-steps-common-icon-size)/2 + var(--okd-steps-style-margin-left, 42px))*2)
}

.okui-steps-label-vertical-left .okui-steps-item-content:after {
    display: none
}

.okui-steps-label-vertical-left .okui-steps-item-icon {
    display: inline-flex;
    margin-left: 0
}

.okui-steps-label-vertical-left .okui-steps-item-title {
    padding-left: 0;
    padding-right: 0
}

.okui-steps-circle .okui-steps-item-icon {
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-flex;
    height: 8px;
    height: var(--okd-steps-circle-icon-size, 8px);
    line-height: 8px;
    line-height: var(--okd-steps-circle-icon-size, 8px);
    text-align: center;
    transition: background-color .3s, border-color .3s;
    width: 8px;
    width: var(--okd-steps-circle-icon-size, 8px)
}

.okui-steps-circle .okui-steps-item-icon .okui-steps-item-icon-num {
    display: none
}

.okui-steps-circle .okui-steps-item-process .okui-steps-item-icon {
    background: #000;
    background: var(--okd-steps-circle-process-bg-color, #000);
    border: 0 solid #000;
    border: 0 solid var(--okd-steps-circle-process-bg-color, #000)
}

.okui-steps-circle .okui-steps-item-waiting .okui-steps-item-icon {
    background: #dbdbdb;
    background: var(--okd-steps-circle-waiting-bg-color, #dbdbdb);
    border: 0 solid #dbdbdb;
    border: 0 solid var(--okd-steps-circle-waiting-bg-color, #dbdbdb)
}

.okui-steps-circle .okui-steps-item-finish .okui-steps-item-icon {
    background: #000;
    background: var(--okd-steps-circle-finish-bg-color, #000);
    border: 0 solid #000;
    border: 0 solid var(--okd-steps-circle-finish-bg-color, #000)
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item-tail {
    margin-left: calc(var(--okd-steps-common-icon-size) + var(--okd-steps-style-margin-left, 42px))
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item-tail:after {
    width: calc(100% - var(--okd-steps-common-icon-size))
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item-content {
    width: calc(var(--okd-steps-common-icon-size)/2*2 + 84px);
    width: calc((var(--okd-steps-common-icon-size)/2 + var(--okd-steps-style-margin-left, 42px))*2)
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item-icon {
    display: inline-flex;
    margin-left: 42px;
    margin-left: var(--okd-steps-style-margin-left, 42px)
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item {
    overflow: visible
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item-tail {
    margin-left: 50px;
    margin-left: calc(var(--okd-steps-circle-icon-size, 8px) + var(--okd-steps-style-margin-left, 42px));
    padding: 0;
    top: 4px;
    top: calc(var(--okd-steps-circle-icon-size, 8px)/2)
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item-tail:after {
    width: calc(100% - 8px);
    width: calc(100% - var(--okd-steps-circle-icon-size, 8px))
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item-content {
    display: block;
    margin-left: 0;
    margin-top: var(--okd-steps-label-vertical-content-margin-top);
    text-align: center;
    width: 92px;
    width: calc((var(--okd-steps-circle-icon-size, 8px)/2 + var(--okd-steps-style-margin-left, 42px))*2)
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item-content:after {
    display: none
}

.okui-steps-circle.okui-steps-horizontal .okui-steps-item-title {
    padding-left: 0;
    padding-right: 0
}

.okui-steps-circle.okui-steps-vertical .okui-steps-item-tail {
    bottom: 12px;
    height: calc(100% - 8px);
    height: calc(100% - var(--okd-steps-circle-icon-size, 8px));
    left: 4px;
    left: calc(var(--okd-steps-circle-icon-size, 8px)/2);
    padding: 0;
    position: absolute;
    top: 14px;
    top: calc(var(--okd-steps-circle-icon-size, 8px) + var(--okd-steps-circle-icon-margin-top, 6px));
    width: 1px
}

.okui-steps-circle.okui-steps-vertical .okui-steps-item-tail:after {
    background-image: linear-gradient(180deg, transparent 0, transparent 50%, #dbdbdb 0, #dbdbdb);
    background-image: linear-gradient(to bottom, transparent 0, transparent 50%, var(--okd-steps-process-tail-color, #dbdbdb) 50%, var(--okd-steps-process-tail-color, #dbdbdb) 100%);
    background-repeat: repeat-y;
    background-size: 1px 4px;
    background-size: 1px var(--okd-steps-common-waiting-border-width, 4px);
    height: 100%;
    top: 0;
    width: 1px
}

.okui-steps-circle.okui-steps-vertical .okui-steps-item .okui-steps-item-icon {
    margin-top: 6px;
    margin-top: var(--okd-steps-circle-icon-margin-top, 6px)
}

.okui-steps-circle.okui-steps-vertical .okui-steps-item:not(:last-child) .okui-steps-item-tail {
    display: block
}

.okui-steps-circle.okui-steps-vertical .okui-steps-item-finish .okui-steps-item-tail:after {
    background-color: #000;
    background-color: var(--okd-steps-finish-tail-color, #000);
    background-image: none
}

.okui-steps .okui-steps-item-icon.okui-steps-item-custom-icon {
    background: transparent;
    border: none
}

.okui-btn .okui-btn-outline-primary-loader {
    border-color: var(--okd-button-outline-primary-loader-track-color);
    border-top-color: var(--okd-button-outline-primary-loader-mark-color)
}

.okui-btn.btn-outline-primary {
    background: var(--okd-button-outline-primary-default-background);
    border-color: var(--okd-button-outline-primary-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-outline-primary-border-size);
    box-shadow: var(--okd-button-outline-primary-default-shadow);
    color: var(--okd-button-outline-primary-default-font-color)
}

.okui-btn.btn-outline-primary.hover,
.okui-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-outline-primary-hover-background);
    border-color: var(--okd-button-outline-primary-hover-border-color);
    box-shadow: var(--okd-button-outline-primary-hover-shadow);
    color: var(--okd-button-outline-primary-hover-font-color)
}

.okui-btn.btn-outline-primary.hover .btn-icon,
.okui-btn.btn-outline-primary:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-outline-primary-hover-icon-color)
}

.okui-btn.btn-outline-primary.active,
.okui-btn.btn-outline-primary:not(:disabled):active {
    background: var(--okd-button-outline-primary-active-background);
    border-color: var(--okd-button-outline-primary-active-border-color);
    box-shadow: var(--okd-button-outline-primary-active-shadow);
    color: var(--okd-button-outline-primary-active-font-color)
}

.okui-btn.btn-outline-primary.active .btn-icon,
.okui-btn.btn-outline-primary:not(:disabled):active .btn-icon {
    color: var(--okd-button-outline-primary-active-icon-color)
}

.okui-btn.btn-outline-primary:not(.loading).btn-disabled,
.okui-btn.btn-outline-primary:not(.loading):disabled {
    background: var(--okd-button-outline-primary-disabled-background);
    border-color: var(--okd-button-outline-primary-disabled-border-color);
    box-shadow: var(--okd-button-outline-primary-disabled-shadow);
    color: var(--okd-button-outline-primary-disabled-font-color)
}

.okui-btn.btn-outline-primary:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-outline-primary:not(.loading):disabled .btn-icon {
    color: var(--okd-button-outline-primary-disabled-icon-color)
}

.okui-btn.btn-outline-primary.loading {
    cursor: pointer
}

.okui-btn.btn-outline-primary .btn-icon {
    color: var(--okd-button-outline-primary-default-icon-color)
}

.okui-btn.btn-outline-primary .okui-btn-loader-text {
    color: var(--okd-button-outline-primary-default-font-color)
}

.okui-btn.btn-outline-primary.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-outline-primary-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-outline-primary.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-outline-primary-border-size)*2)
}

.okui-btn.btn-outline-primary.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-primary.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-outline-primary-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-outline-primary.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-outline-primary-border-size)*2)
}

.okui-btn.btn-outline-primary.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-primary.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-outline-primary-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-outline-primary.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-outline-primary-border-size)*2)
}

.okui-btn.btn-outline-primary.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-primary.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-outline-primary-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-outline-primary.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-outline-primary-border-size)*2)
}

.okui-btn.btn-outline-primary.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-primary.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-outline-primary-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-outline-primary.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-outline-primary-border-size)*2)
}

.okui-btn.btn-outline-primary.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-primary.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-outline-primary-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-outline-primary.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-outline-primary-border-size)*2)
}

.okui-btn.btn-outline-primary.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-outline-primary.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-outline-primary-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-outline-primary.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-outline-primary-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-outline-primary-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-outline-primary-border-size)*2)
}

.okui-btn.btn-outline-primary.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-input-reversed.okui-input .okui-input-code-btn {
    color: var(--okd-input-code-reversed-common-btn-color)
}

.okui-input-reversed.okui-input .okui-input-code-btn.disabled {
    color: var(--okd-input-code-reversed-common-btn-disabled-color)
}

.okui-input-reversed.okui-input .okui-input-count-down {
    color: var(--okd-input-code-reversed-common-count-color)
}

.okui-tag-fill-grey {
    background-color: var(--okd-tag-fill-grey-background-color);
    border-color: var(--okd-tag-fill-grey-border-color);
    color: var(--okd-tag-fill-grey-font-color)
}

.okui-tag-fill-lightgrey {
    background-color: hsla(0, 0%, 100%, 0);
    background-color: var(--okd-tag-fill-lightgrey-background-color, hsla(0, 0%, 100%, 0));
    border-color: hsla(0, 0%, 100%, 0);
    border-color: var(--okd-tag-fill-lightgrey-border-color, hsla(0, 0%, 100%, 0));
    color: hsla(0, 0%, 100%, 0);
    color: var(--okd-tag-fill-lightgrey-font-color, hsla(0, 0%, 100%, 0))
}

.okui-tag-fill-green {
    background-color: var(--okd-tag-fill-green-background-color);
    border-color: var(--okd-tag-fill-green-border-color);
    color: var(--okd-tag-fill-green-font-color)
}

.okui-tag-fill-tangerine {
    background-color: hsla(0, 0%, 100%, 0);
    background-color: var(--okd-tag-fill-tangerine-background-color, hsla(0, 0%, 100%, 0));
    border-color: hsla(0, 0%, 100%, 0);
    border-color: var(--okd-tag-fill-tangerine-border-color, hsla(0, 0%, 100%, 0));
    color: hsla(0, 0%, 100%, 0);
    color: var(--okd-tag-fill-tangerine-font-color, hsla(0, 0%, 100%, 0))
}

.okui-tag-outline-grey {
    background-color: var(--okd-tag-outline-grey-background-color);
    border-color: var(--okd-tag-outline-grey-border-color);
    color: var(--okd-tag-outline-grey-font-color)
}

.okui-tag-outline-lightgrey {
    background-color: var(--okd-tag-outline-lightgrey-background-color);
    border-color: var(--okd-tag-outline-lightgrey-border-color);
    color: var(--okd-tag-outline-lightgrey-font-color)
}

.okui-tag-outline-green {
    background-color: var(--okd-tag-outline-green-background-color);
    border-color: var(--okd-tag-outline-green-border-color);
    color: var(--okd-tag-outline-green-font-color)
}

.okui-tag-outline-red {
    background-color: var(--okd-tag-outline-red-background-color);
    border-color: var(--okd-tag-outline-red-border-color);
    color: var(--okd-tag-outline-red-font-color)
}

.okui-tag-outline-tangerine {
    background-color: var(--okd-tag-outline-tangerine-background-color);
    border-color: var(--okd-tag-outline-tangerine-border-color);
    color: var(--okd-tag-outline-tangerine-font-color)
}

.okui-tag-outline-lime {
    background-color: hsla(0, 0%, 100%, 0);
    background-color: var(--okd-tag-outline-lime-background-color, hsla(0, 0%, 100%, 0));
    border-color: hsla(0, 0%, 100%, 0);
    border-color: var(--okd-tag-outline-lime-border-color, hsla(0, 0%, 100%, 0));
    color: hsla(0, 0%, 100%, 0);
    color: var(--okd-tag-outline-lime-font-color, hsla(0, 0%, 100%, 0))
}

.okui-tag-fill-red {
    background-color: var(--okd-tag-fill-red-background-color);
    border-color: var(--okd-tag-fill-red-border-color);
    color: var(--okd-tag-fill-red-font-color)
}

.okui-input-reversed.okui-input-search .okui-input-prefix .okui-input-search-prefix-icon {
    color: var(--okd-input-search-reversed-prefix-icon-color)
}

.okui-input-reversed.okui-input-search .okui-input-error {
    color: var(--okd-input-search-reversed-error-tips-color)
}

.okui-input-reversed.okui-input-search .okui-input-box {
    background-color: var(--okd-input-search-reversed-default-background);
    border-color: var(--okd-input-search-reversed-default-border-color);
    box-shadow: var(--okd-input-search-reversed-default-shadow)
}

.okui-input-reversed.okui-input-search .okui-input-input {
    color: var(--okd-input-search-reversed-default-text-color)
}

.okui-input-reversed.okui-input-search .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-default-placeholder-color);
    color: var(--okd-input-search-reversed-default-placeholder-color)
}

.okui-input-reversed.okui-input-search .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-default-placeholder-color);
    color: var(--okd-input-search-reversed-default-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-default-placeholder-color);
    color: var(--okd-input-search-reversed-default-placeholder-color)
}

.okui-input-reversed.okui-input-search.hover .okui-input-box,
.okui-input-reversed.okui-input-search:hover .okui-input-box {
    background: var(--okd-input-search-reversed-hover-background);
    border: thin solid var(--okd-input-search-reversed-hover-border-color);
    box-shadow: var(--okd-input-search-reversed-hover-shadow)
}

.okui-input-reversed.okui-input-search.hover .okui-input-box .okui-input-input,
.okui-input-reversed.okui-input-search:hover .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-reversed-hover-text-color);
    caret-color: var(--okd-input-search-reversed-hover-caret-color);
    color: var(--okd-input-search-reversed-hover-text-color)
}

.okui-input-reversed.okui-input-search.hover .okui-input-box .okui-input-input::-webkit-input-placeholder,
.okui-input-reversed.okui-input-search:hover .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-hover-placeholder-color);
    color: var(--okd-input-search-reversed-hover-placeholder-color)
}

.okui-input-reversed.okui-input-search.hover .okui-input-box .okui-input-input:-moz-placeholder,
.okui-input-reversed.okui-input-search:hover .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-hover-placeholder-color);
    color: var(--okd-input-search-reversed-hover-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search.hover .okui-input-box .okui-input-input::-ms-input-placeholder,
.okui-input-reversed.okui-input-search:hover .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-hover-placeholder-color);
    color: var(--okd-input-search-reversed-hover-placeholder-color)
}

.okui-input-reversed.okui-input-search.focus .okui-input-box {
    background: var(--okd-input-search-reversed-focus-background);
    border: thin solid var(--okd-input-search-reversed-focus-border-color);
    box-shadow: var(--okd-input-search-reversed-focus-shadow)
}

.okui-input-reversed.okui-input-search.focus .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-reversed-focus-text-color);
    caret-color: var(--okd-input-search-reversed-focus-caret-color);
    color: var(--okd-input-search-reversed-focus-text-color)
}

.okui-input-reversed.okui-input-search.focus .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-focus-placeholder-color);
    color: var(--okd-input-search-reversed-focus-placeholder-color)
}

.okui-input-reversed.okui-input-search.focus .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-focus-placeholder-color);
    color: var(--okd-input-search-reversed-focus-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search.focus .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-focus-placeholder-color);
    color: var(--okd-input-search-reversed-focus-placeholder-color)
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box {
    background: var(--okd-input-search-reversed-disabled-background);
    border: thin solid var(--okd-input-search-reversed-disabled-border-color);
    box-shadow: var(--okd-input-search-reversed-disabled-shadow)
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-reversed-disabled-text-color);
    caret-color: var(--okd-input-search-reversed-disabled-caret-color);
    color: var(--okd-input-search-reversed-disabled-text-color)
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-disabled-placeholder-color);
    color: var(--okd-input-search-reversed-disabled-placeholder-color)
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-disabled-placeholder-color);
    color: var(--okd-input-search-reversed-disabled-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search.disabled .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-disabled-placeholder-color);
    color: var(--okd-input-search-reversed-disabled-placeholder-color)
}

.okui-input-reversed.okui-input-search.error .okui-input-box {
    background: var(--okd-input-search-reversed-error-background);
    border: thin solid var(--okd-input-search-reversed-error-border-color);
    box-shadow: var(--okd-input-search-reversed-error-shadow)
}

.okui-input-reversed.okui-input-search.error .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-reversed-error-text-color);
    caret-color: var(--okd-input-search-reversed-error-caret-color);
    color: var(--okd-input-search-reversed-error-text-color)
}

.okui-input-reversed.okui-input-search.error .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-error-placeholder-color);
    color: var(--okd-input-search-reversed-error-placeholder-color)
}

.okui-input-reversed.okui-input-search.error .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-error-placeholder-color);
    color: var(--okd-input-search-reversed-error-placeholder-color);
    opacity: 1
}

.okui-input-reversed.okui-input-search.error .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-reversed-error-placeholder-color);
    color: var(--okd-input-search-reversed-error-placeholder-color)
}

.okui-label {
    display: flex;
    width: 100%
}

.okui-label.top-right {
    justify-content: flex-end
}

.okui-label.top-between {
    justify-content: space-between
}

.okui-label-text {
    color: var(--okd-input-label-color);
    font-weight: 500
}

.okui-label-action {
    color: var(--okd-input-action-color);
    cursor: pointer;
    font-weight: 500
}

.okui-label.label-xl .okui-label-text {
    font-size: var(--okd-input-xl-label-font-size);
    line-height: var(--okd-input-xl-label-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-xl-label-margin, 6px)
}

.okui-label.label-xl .okui-label-action {
    font-size: var(--okd-input-xl-action-font-size);
    line-height: var(--okd-input-xl-action-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-xl-label-margin, 6px)
}

.okui-label.label-xl .okui-label-place {
    min-height: var(--okd-input-xl-label-line-height)
}

.okui-label.label-lg .okui-label-text {
    font-size: var(--okd-input-lg-label-font-size);
    line-height: var(--okd-input-lg-label-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-lg-label-margin, 6px)
}

.okui-label.label-lg .okui-label-action {
    font-size: var(--okd-input-lg-action-font-size);
    line-height: var(--okd-input-lg-action-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-lg-label-margin, 6px)
}

.okui-label.label-lg .okui-label-place {
    min-height: var(--okd-input-lg-label-line-height)
}

.okui-label.label-xs .okui-label-text {
    font-size: var(--okd-input-xs-label-font-size);
    line-height: var(--okd-input-xs-label-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-xs-label-margin, 4px)
}

.okui-label.label-xs .okui-label-action {
    font-size: var(--okd-input-xs-action-font-size);
    line-height: var(--okd-input-xs-action-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-xs-label-margin, 4px)
}

.okui-label.label-xs .okui-label-place {
    min-height: var(--okd-input-xs-label-line-height)
}

.okui-label.label-sm .okui-label-text {
    font-size: var(--okd-input-sm-label-font-size);
    line-height: var(--okd-input-sm-label-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-sm-label-margin, 4px)
}

.okui-label.label-sm .okui-label-action {
    font-size: var(--okd-input-sm-action-font-size);
    line-height: var(--okd-input-sm-action-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-sm-label-margin, 4px)
}

.okui-label.label-sm .okui-label-place {
    min-height: var(--okd-input-sm-label-line-height)
}

.okui-label.label-md .okui-label-text {
    font-size: var(--okd-input-md-label-font-size);
    line-height: var(--okd-input-md-label-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-md-label-margin, 4px)
}

.okui-label.label-md .okui-label-action {
    font-size: var(--okd-input-md-action-font-size);
    line-height: var(--okd-input-md-action-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-md-label-margin, 4px)
}

.okui-label.label-md .okui-label-place {
    min-height: var(--okd-input-md-label-line-height)
}

.okui-input-caret-color {
    caret-color: var(--okd-input-focus-caret-color)
}

.okui-input-caret-color input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

.okui-input-caret-color input[type=search]::-moz-search-cancel-button {
    -moz-appearance: none;
    appearance: none
}

.okui-input-caret-color input::-ms-clear,
.okui-input-caret-color input::-ms-reveal {
    display: none
}

.okui-input-caret-color input::-o-clear {
    display: none
}

.okui-input {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    position: relative
}

.okui-input input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

.okui-input input[type=search]::-moz-search-cancel-button {
    -moz-appearance: none;
    appearance: none
}

.okui-input input::-ms-clear,
.okui-input input::-ms-reveal {
    display: none
}

.okui-input input::-o-clear {
    display: none
}

.okui-input * {
    box-sizing: border-box
}

.okui-input-prefix,
.okui-input-suffix {
    align-items: center;
    display: flex;
    flex-shrink: 1;
    white-space: nowrap
}

.okui-input-input {
    background: transparent;
    border: none;
    color: var(--okd-input-default-text-color);
    flex-grow: 1;
    font-family: inherit;
    height: 100%;
    outline: none;
    width: 100%
}

.okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-default-placeholder-color)
}

.okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-default-placeholder-color);
    opacity: 1
}

.okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-default-placeholder-color)
}

.okui-input-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-default-text-color) !important;
    border: none;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-default-background) inset
}

.okui-input-input.input-textarea {
    box-shadow: none;
    outline: none;
    resize: none
}

.okui-input-custom-placeholder {
    position: relative;
    width: 100%
}

.okui-input-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.okui-input-placeholder {
    bottom: 0;
    color: var(--okd-input-default-placeholder-color);
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.okui-input-tips-box {
    display: flex;
    width: 100%
}

.okui-input-error {
    color: var(--okd-input-error-tips-color)
}

.okui-input-tips {
    color: var(--okd-input-tips-text-color);
    display: inline-block
}

.okui-input-help-text {
    color: var(--okd-input-tips-text-color);
    flex-grow: 1;
    flex-shrink: 0;
    text-align: right
}

.okui-input.hover,
.okui-input:hover {
    cursor: text
}

.okui-input.hover .okui-input-box,
.okui-input:hover .okui-input-box {
    background: var(--okd-input-hover-background);
    border: thin solid var(--okd-input-hover-border-color);
    box-shadow: var(--okd-input-hover-shadow)
}

.okui-input.hover .okui-input-box .okui-input-input,
.okui-input:hover .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-hover-text-color);
    caret-color: var(--okd-input-hover-caret-color);
    color: var(--okd-input-hover-text-color)
}

.okui-input.hover .okui-input-box .okui-input-input::-webkit-input-placeholder,
.okui-input:hover .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-hover-placeholder-color);
    color: var(--okd-input-hover-placeholder-color)
}

.okui-input.hover .okui-input-box .okui-input-input:-moz-placeholder,
.okui-input:hover .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-hover-placeholder-color);
    color: var(--okd-input-hover-placeholder-color);
    opacity: 1
}

.okui-input.hover .okui-input-box .okui-input-input::-ms-input-placeholder,
.okui-input:hover .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-hover-placeholder-color);
    color: var(--okd-input-hover-placeholder-color)
}

.okui-input.focus .okui-input-box {
    background: var(--okd-input-focus-background);
    border: thin solid var(--okd-input-focus-border-color);
    box-shadow: var(--okd-input-focus-shadow)
}

.okui-input.focus .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-focus-text-color);
    caret-color: var(--okd-input-focus-caret-color);
    color: var(--okd-input-focus-text-color)
}

.okui-input.focus .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-focus-placeholder-color);
    color: var(--okd-input-focus-placeholder-color)
}

.okui-input.focus .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-focus-placeholder-color);
    color: var(--okd-input-focus-placeholder-color);
    opacity: 1
}

.okui-input.focus .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-focus-placeholder-color);
    color: var(--okd-input-focus-placeholder-color)
}

.okui-input.readonly .okui-input-box {
    background: var(--okd-input-default-background);
    background: var(--okd-input-readonly-background, var(--okd-input-default-background));
    border: thin solid var(--okd-input-readonly-border-color, var(--okd-input-default-border-color));
    box-shadow: var(--okd-input-default-shadow);
    box-shadow: var(--okd-input-readonly-shadow, var(--okd-input-default-shadow))
}

.okui-input.readonly .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-default-text-color);
    -webkit-text-fill-color: var(--okd-input-readonly-text-color, var(--okd-input-default-text-color));
    caret-color: var(--okd-input-default-caret-color);
    caret-color: var(--okd-input-readonly-caret-color, var(--okd-input-default-caret-color));
    color: var(--okd-input-default-text-color);
    color: var(--okd-input-readonly-text-color, var(--okd-input-default-text-color))
}

.okui-input.readonly .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    -webkit-text-fill-color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color));
    color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color))
}

.okui-input.readonly .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    -webkit-text-fill-color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color));
    color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color));
    opacity: 1
}

.okui-input.readonly .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-default-placeholder-color);
    -webkit-text-fill-color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color));
    color: var(--okd-input-default-placeholder-color);
    color: var(--okd-input-readonly-placeholder-color, var(--okd-input-default-placeholder-color))
}

.okui-input.readonly.focus .okui-input-box {
    border-color: var(--okd-input-focus-border-color)
}

.okui-input.disabled {
    cursor: not-allowed
}

.okui-input.disabled .okui-input-box {
    background: var(--okd-input-disabled-background);
    border: thin solid var(--okd-input-disabled-border-color);
    box-shadow: var(--okd-input-disabled-shadow)
}

.okui-input.disabled .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-disabled-text-color);
    caret-color: var(--okd-input-disabled-caret-color);
    color: var(--okd-input-disabled-text-color)
}

.okui-input.disabled .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-disabled-placeholder-color);
    color: var(--okd-input-disabled-placeholder-color)
}

.okui-input.disabled .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-disabled-placeholder-color);
    color: var(--okd-input-disabled-placeholder-color);
    opacity: 1
}

.okui-input.disabled .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-disabled-placeholder-color);
    color: var(--okd-input-disabled-placeholder-color)
}

.okui-input.disabled .okui-input-input {
    cursor: not-allowed;
    opacity: 1
}

.okui-input.disabled .okui-input-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-disabled-text-color) !important;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-disabled-background) inset
}

.okui-input.error .okui-input-box {
    background: var(--okd-input-error-background);
    border: thin solid var(--okd-input-error-border-color);
    box-shadow: var(--okd-input-error-shadow)
}

.okui-input.error .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-error-text-color);
    caret-color: var(--okd-input-error-caret-color);
    color: var(--okd-input-error-text-color)
}

.okui-input.error .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-error-placeholder-color);
    color: var(--okd-input-error-placeholder-color)
}

.okui-input.error .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-error-placeholder-color);
    color: var(--okd-input-error-placeholder-color);
    opacity: 1
}

.okui-input.error .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-error-placeholder-color);
    color: var(--okd-input-error-placeholder-color)
}

.okui-input.error .okui-input-error {
    display: inline-block
}

.okui-input.no-border .okui-input-box {
    background: transparent;
    border: thin solid transparent;
    box-shadow: none
}

.okui-input-textarea-resize-virtual-dom::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0
}

.okui-input-box {
    align-items: center;
    background: var(--okd-input-default-background);
    border: thin solid var(--okd-input-default-border-color);
    box-shadow: var(--okd-input-default-shadow);
    display: flex;
    transition: border-color .3s, box-shadow .3s;
    width: 100%
}

.okui-input-xl>.okui-input-box {
    border-radius: var(--okd-input-xl-border-radius);
    height: var(--okd-input-xl-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-xl-padding-horizontal, 8px)
}

.okui-input-xl>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-xl-height)
}

.okui-input-xl>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-xl>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-xl>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-xl>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-xl-height)
}

.okui-input-xl>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-xl .okui-input-input {
    font-size: var(--okd-input-xl-text-font-size);
    padding: calc(var(--okd-input-xl-height)/2 - var(--okd-input-xl-text-font-size)/2 - 2px) 0
}

.okui-input-xl .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-xl-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xl .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-xl-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xl .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-xl-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xl .okui-input-input.ta {
    padding: 0
}

.okui-input-xl .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-xl-text-font-size)
}

.okui-input-xl .okui-input-placeholder {
    font-size: var(--okd-input-xl-text-font-size);
    height: calc(var(--okd-input-xl-text-font-size) + 2px);
    line-height: calc(var(--okd-input-xl-text-font-size) + 2px)
}

.okui-input-xl .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-xl-tip-line-height) + 6px);
    min-height: calc(var(--okd-input-xl-tip-line-height) + var(--okd-input-xl-tip-margin, 6px))
}

.okui-input-xl .okui-input-error {
    font-size: var(--okd-input-xl-error-font-size);
    line-height: var(--okd-input-xl-error-line-height);
    margin-top: 6px;
    margin-top: var(--okd-input-xl-tip-margin, 6px)
}

.okui-input-xl .okui-input-help-text,
.okui-input-xl .okui-input-tips {
    font-size: var(--okd-input-xl-tip-font-size);
    line-height: var(--okd-input-xl-tip-line-height);
    margin-top: 6px;
    margin-top: var(--okd-input-xl-tip-margin, 6px)
}

.okui-input-lg>.okui-input-box {
    border-radius: var(--okd-input-lg-border-radius);
    height: var(--okd-input-lg-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-lg-padding-horizontal, 8px)
}

.okui-input-lg>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-lg-height)
}

.okui-input-lg>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-lg>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-lg>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-lg>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-lg-height)
}

.okui-input-lg>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-lg .okui-input-input {
    font-size: var(--okd-input-lg-text-font-size);
    padding: calc(var(--okd-input-lg-height)/2 - var(--okd-input-lg-text-font-size)/2 - 2px) 0
}

.okui-input-lg .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-lg-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-lg .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-lg-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-lg .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-lg-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-lg .okui-input-input.ta {
    padding: 0
}

.okui-input-lg .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-lg-text-font-size)
}

.okui-input-lg .okui-input-placeholder {
    font-size: var(--okd-input-lg-text-font-size);
    height: calc(var(--okd-input-lg-text-font-size) + 2px);
    line-height: calc(var(--okd-input-lg-text-font-size) + 2px)
}

.okui-input-lg .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-lg-tip-line-height) + 6px);
    min-height: calc(var(--okd-input-lg-tip-line-height) + var(--okd-input-lg-tip-margin, 6px))
}

.okui-input-lg .okui-input-error {
    font-size: var(--okd-input-lg-error-font-size);
    line-height: var(--okd-input-lg-error-line-height);
    margin-top: 6px;
    margin-top: var(--okd-input-lg-tip-margin, 6px)
}

.okui-input-lg .okui-input-help-text,
.okui-input-lg .okui-input-tips {
    font-size: var(--okd-input-lg-tip-font-size);
    line-height: var(--okd-input-lg-tip-line-height);
    margin-top: 6px;
    margin-top: var(--okd-input-lg-tip-margin, 6px)
}

.okui-input-xs>.okui-input-box {
    border-radius: var(--okd-input-xs-border-radius);
    height: var(--okd-input-xs-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-xs-padding-horizontal, 8px)
}

.okui-input-xs>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-xs-height)
}

.okui-input-xs>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-xs>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-xs>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-xs>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-xs-height)
}

.okui-input-xs>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-xs .okui-input-input {
    font-size: var(--okd-input-xs-text-font-size);
    padding: calc(var(--okd-input-xs-height)/2 - var(--okd-input-xs-text-font-size)/2 - 2px) 0
}

.okui-input-xs .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-xs-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xs .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-xs-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xs .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-xs-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-xs .okui-input-input.ta {
    padding: 0
}

.okui-input-xs .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-xs-text-font-size)
}

.okui-input-xs .okui-input-placeholder {
    font-size: var(--okd-input-xs-text-font-size);
    height: calc(var(--okd-input-xs-text-font-size) + 2px);
    line-height: calc(var(--okd-input-xs-text-font-size) + 2px)
}

.okui-input-xs .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-xs-tip-line-height) + 4px);
    min-height: calc(var(--okd-input-xs-tip-line-height) + var(--okd-input-xs-tip-margin, 4px))
}

.okui-input-xs .okui-input-error {
    font-size: var(--okd-input-xs-error-font-size);
    line-height: var(--okd-input-xs-error-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-xs-tip-margin, 4px)
}

.okui-input-xs .okui-input-help-text,
.okui-input-xs .okui-input-tips {
    font-size: var(--okd-input-xs-tip-font-size);
    line-height: var(--okd-input-xs-tip-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-xs-tip-margin, 4px)
}

.okui-input-sm>.okui-input-box {
    border-radius: var(--okd-input-sm-border-radius);
    height: var(--okd-input-sm-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-sm-padding-horizontal, 8px)
}

.okui-input-sm>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-sm-height)
}

.okui-input-sm>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-sm>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-sm>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-sm>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-sm-height)
}

.okui-input-sm>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-sm .okui-input-input {
    font-size: var(--okd-input-sm-text-font-size);
    padding: calc(var(--okd-input-sm-height)/2 - var(--okd-input-sm-text-font-size)/2 - 2px) 0
}

.okui-input-sm .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-sm-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-sm .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-sm-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-sm .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-sm-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-sm .okui-input-input.ta {
    padding: 0
}

.okui-input-sm .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-sm-text-font-size)
}

.okui-input-sm .okui-input-placeholder {
    font-size: var(--okd-input-sm-text-font-size);
    height: calc(var(--okd-input-sm-text-font-size) + 2px);
    line-height: calc(var(--okd-input-sm-text-font-size) + 2px)
}

.okui-input-sm .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-sm-tip-line-height) + 4px);
    min-height: calc(var(--okd-input-sm-tip-line-height) + var(--okd-input-sm-tip-margin, 4px))
}

.okui-input-sm .okui-input-error {
    font-size: var(--okd-input-sm-error-font-size);
    line-height: var(--okd-input-sm-error-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-sm-tip-margin, 4px)
}

.okui-input-sm .okui-input-help-text,
.okui-input-sm .okui-input-tips {
    font-size: var(--okd-input-sm-tip-font-size);
    line-height: var(--okd-input-sm-tip-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-sm-tip-margin, 4px)
}

.okui-input-md>.okui-input-box {
    border-radius: var(--okd-input-md-border-radius);
    height: var(--okd-input-md-height);
    padding: 0 8px;
    padding: 0 var(--okd-input-md-padding-horizontal, 8px)
}

.okui-input-md>.okui-input-box.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-md-height)
}

.okui-input-md>.okui-input-box.no-padding-left {
    padding-left: 0
}

.okui-input-md>.okui-input-box.no-padding-right {
    padding-right: 0
}

.okui-input-md>.okui-input-box.ta {
    height: 100%;
    padding: 8px
}

.okui-input-md>.okui-input-box.auto-resize-auto-height {
    height: -moz-fit-content;
    height: fit-content;
    min-height: var(--okd-input-md-height)
}

.okui-input-md>.okui-input-box.input-circle {
    border-radius: 100px
}

.okui-input-md .okui-input-input {
    font-size: var(--okd-input-md-text-font-size);
    padding: calc(var(--okd-input-md-height)/2 - var(--okd-input-md-text-font-size)/2 - 2px) 0
}

.okui-input-md .okui-input-input::-webkit-input-placeholder {
    font-size: var(--okd-input-md-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-md .okui-input-input:-moz-placeholder {
    font-size: var(--okd-input-md-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-md .okui-input-input::-ms-input-placeholder {
    font-size: var(--okd-input-md-text-font-size);
    font-weight: 400;
    text-overflow: ellipsis
}

.okui-input-md .okui-input-input.ta {
    padding: 0
}

.okui-input-md .okui-input-input.textarea-auto-resize {
    line-height: var(--okd-input-md-text-font-size)
}

.okui-input-md .okui-input-placeholder {
    font-size: var(--okd-input-md-text-font-size);
    height: calc(var(--okd-input-md-text-font-size) + 2px);
    line-height: calc(var(--okd-input-md-text-font-size) + 2px)
}

.okui-input-md .okui-input.okui-input-place-mode .okui-input-tips-box {
    min-height: calc(var(--okd-input-md-tip-line-height) + 4px);
    min-height: calc(var(--okd-input-md-tip-line-height) + var(--okd-input-md-tip-margin, 4px))
}

.okui-input-md .okui-input-error {
    font-size: var(--okd-input-md-error-font-size);
    line-height: var(--okd-input-md-error-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-md-tip-margin, 4px)
}

.okui-input-md .okui-input-help-text,
.okui-input-md .okui-input-tips {
    font-size: var(--okd-input-md-tip-font-size);
    line-height: var(--okd-input-md-tip-line-height);
    margin-top: 4px;
    margin-top: var(--okd-input-md-tip-margin, 4px)
}

.okui-input-prefix {
    height: 100%
}

.okui-input-prefix .prefix-icon {
    color: var(--okd-input-icon-color)
}

.okui-input-prefix .select {
    padding-right: 8px
}

.okui-input-suffix {
    height: 100%
}

.okui-input-suffix .suffix-icon {
    color: var(--okd-input-icon-color)
}

.okui-input-suffix .clean-icon:hover {
    color: #000;
    color: var(--okd-input-search-suffix-icon-hover-color, #000)
}

.okui-input-suffix .error-icon {
    color: var(--okd-input-error-tips-color)
}

.okui-input-xl .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-xl-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-xl-icon-margin)
}

.okui-input-xl .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-xl-icon-size);
    margin-left: var(--okd-input-xl-icon-margin);
    margin-right: 0
}

.okui-input-lg .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-lg-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-lg-icon-margin)
}

.okui-input-lg .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-lg-icon-size);
    margin-left: var(--okd-input-lg-icon-margin);
    margin-right: 0
}

.okui-input-xs .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-xs-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-xs-icon-margin)
}

.okui-input-xs .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-xs-icon-size);
    margin-left: var(--okd-input-xs-icon-margin);
    margin-right: 0
}

.okui-input-sm .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-sm-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-sm-icon-margin)
}

.okui-input-sm .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-sm-icon-size);
    margin-left: var(--okd-input-sm-icon-margin);
    margin-right: 0
}

.okui-input-md .okui-input-prefix .prefix-icon {
    font-size: var(--okd-input-md-icon-size);
    margin-left: 0;
    margin-right: var(--okd-input-md-icon-margin)
}

.okui-input-md .okui-input-suffix .suffix-icon {
    font-size: var(--okd-input-md-icon-size);
    margin-left: var(--okd-input-md-icon-margin);
    margin-right: 0
}

.okui-input:hover .okui-input-number-suffix:not(.operation-always) {
    opacity: 1
}

.okui-input-number-inner {
    overflow: hidden
}

.okui-input-number-suffix {
    align-items: center;
    border-left: 1px solid var(--okd-input-number-suffix-border-color, var(--okd-input-default-border-color));
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    line-height: 0;
    margin-left: 6px;
    overflow: hidden;
    text-align: center;
    transition: opacity .5s;
    width: 24px
}

.okui-input-number-suffix:not(.operation-always) {
    opacity: 0
}

.okui-input-number-suffix-part {
    align-items: center;
    background: var(--okd-input-number-default-add-icon-background);
    box-sizing: border-box;
    display: flex;
    flex: 1 1;
    justify-content: center;
    width: 100%
}

.okui-input-number-suffix-part .icon {
    color: var(--okd-input-number-default-add-icon-color);
    font-size: 13px
}

.okui-input-number-suffix-part .hover,
.okui-input-number-suffix-part:not(.okui-input-number-suffix-part-disabled):hover {
    background: var(--okd-input-number-hover-add-icon-background)
}

.okui-input-number-suffix-part .hover .icon,
.okui-input-number-suffix-part:not(.okui-input-number-suffix-part-disabled):hover .icon {
    color: var(--okd-input-number-hover-add-icon-color)
}

.okui-input-number-suffix-part .active,
.okui-input-number-suffix-part:not(.okui-input-number-suffix-part-disabled):active {
    background: var(--okd-input-number-active-add-icon-background)
}

.okui-input-number-suffix-part .active .icon,
.okui-input-number-suffix-part:not(.okui-input-number-suffix-part-disabled):active .icon {
    color: var(--okd-input-number-active-add-icon-color)
}

.okui-input-number-suffix-part-disabled {
    cursor: not-allowed
}

.okui-input-number-suffix-line {
    background: var(--okd-input-default-border-color);
    background: var(--okd-input-number-suffix-border-color, var(--okd-input-default-border-color));
    height: 1px;
    width: 100%
}

.okui-input-number-suffix .up {
    transform: rotate(180deg)
}

.okui-input-number-localization {
    text-align: right
}

.okui-input-number-localization-percent {
    color: var(--okd-input-default-text-color);
    display: inline-block
}

.okui-input-xl .okui-input-number-suffix.xl {
    border-bottom-right-radius: calc(var(--okd-input-xl-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-xl-border-radius) - 1px)
}

.okui-input-lg .okui-input-number-suffix.lg {
    border-bottom-right-radius: calc(var(--okd-input-lg-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-lg-border-radius) - 1px)
}

.okui-input-xs .okui-input-number-suffix.xs {
    border-bottom-right-radius: calc(var(--okd-input-xs-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-xs-border-radius) - 1px)
}

.okui-input-sm .okui-input-number-suffix.sm {
    border-bottom-right-radius: calc(var(--okd-input-sm-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-sm-border-radius) - 1px)
}

.okui-input-md .okui-input-number-suffix.md {
    border-bottom-right-radius: calc(var(--okd-input-md-border-radius) - 1px);
    border-top-right-radius: calc(var(--okd-input-md-border-radius) - 1px)
}

.okui-input-suffix .suffix-icon+.okui-input-code-btn,
.okui-input-suffix .suffix-icon+.okui-input-count-down {
    margin-left: var(--okd-input-md-icon-margin)
}

.okui-input-count-down {
    color: var(--okd-input-code-common-count-color)
}

.okui-input input::-webkit-inner-spin-button,
.okui-input input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0
}

.okui-input input[type=number] {
    -moz-appearance: textfield
}

.okui-input-xl .okui-input-count-down {
    font-size: var(--okd-input-code-xl-count-font-size);
    line-height: var(--okd-input-code-xl-count-line-height)
}

.okui-input-lg .okui-input-count-down {
    font-size: var(--okd-input-code-lg-count-font-size);
    line-height: var(--okd-input-code-lg-count-line-height)
}

.okui-input-xs .okui-input-count-down {
    font-size: var(--okd-input-code-xs-count-font-size);
    line-height: var(--okd-input-code-xs-count-line-height)
}

.okui-input-sm .okui-input-count-down {
    font-size: var(--okd-input-code-sm-count-font-size);
    line-height: var(--okd-input-code-sm-count-line-height)
}

.okui-input-md .okui-input-count-down {
    font-size: var(--okd-input-code-md-count-font-size);
    line-height: var(--okd-input-code-md-count-line-height)
}

.okui-input-switch-icon.icon {
    cursor: pointer
}

.okui-input-prefix .okui-input-search-prefix-icon {
    color: var(--okd-input-search-prefix-icon-color);
    cursor: pointer;
    font-size: var(--okd-input-search-prefix-icon-size);
    margin-right: 8px
}

.okui-input-suffix .clean-icon {
    color: var(--okd-input-search-suffix-icon-color);
    cursor: pointer;
    font-size: var(--okd-input-search-suffix-icon-size)
}

.okui-input-search .okui-input-error {
    color: var(--okd-input-search-error-tips-color)
}

.okui-input-search .okui-input-box {
    background-color: var(--okd-input-search-default-background);
    border-color: var(--okd-input-search-default-border-color);
    box-shadow: var(--okd-input-search-default-shadow)
}

.okui-input-search .okui-input-input {
    color: var(--okd-input-search-default-text-color)
}

.okui-input-search .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-default-placeholder-color);
    color: var(--okd-input-search-default-placeholder-color)
}

.okui-input-search .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-default-placeholder-color);
    color: var(--okd-input-search-default-placeholder-color);
    opacity: 1
}

.okui-input-search .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-default-placeholder-color);
    color: var(--okd-input-search-default-placeholder-color)
}

.okui-input-search.hover .okui-input-box,
.okui-input-search:hover .okui-input-box {
    background: var(--okd-input-search-hover-background);
    border: thin solid var(--okd-input-search-hover-border-color);
    box-shadow: var(--okd-input-search-hover-shadow)
}

.okui-input-search.hover .okui-input-box .okui-input-input,
.okui-input-search:hover .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-hover-text-color);
    caret-color: var(--okd-input-search-hover-caret-color);
    color: var(--okd-input-search-hover-text-color)
}

.okui-input-search.hover .okui-input-box .okui-input-input::-webkit-input-placeholder,
.okui-input-search:hover .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-hover-placeholder-color);
    color: var(--okd-input-search-hover-placeholder-color)
}

.okui-input-search.hover .okui-input-box .okui-input-input:-moz-placeholder,
.okui-input-search:hover .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-hover-placeholder-color);
    color: var(--okd-input-search-hover-placeholder-color);
    opacity: 1
}

.okui-input-search.hover .okui-input-box .okui-input-input::-ms-input-placeholder,
.okui-input-search:hover .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-hover-placeholder-color);
    color: var(--okd-input-search-hover-placeholder-color)
}

.okui-input-search.focus .okui-input-box {
    background: var(--okd-input-search-focus-background);
    border: thin solid var(--okd-input-search-focus-border-color);
    box-shadow: var(--okd-input-search-focus-shadow)
}

.okui-input-search.focus .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-focus-text-color);
    caret-color: var(--okd-input-search-focus-caret-color);
    color: var(--okd-input-search-focus-text-color)
}

.okui-input-search.focus .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-focus-placeholder-color);
    color: var(--okd-input-search-focus-placeholder-color)
}

.okui-input-search.focus .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-focus-placeholder-color);
    color: var(--okd-input-search-focus-placeholder-color);
    opacity: 1
}

.okui-input-search.focus .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-focus-placeholder-color);
    color: var(--okd-input-search-focus-placeholder-color)
}

.okui-input-search.disabled .okui-input-box {
    background: var(--okd-input-search-disabled-background);
    border: thin solid var(--okd-input-search-disabled-border-color);
    box-shadow: var(--okd-input-search-disabled-shadow)
}

.okui-input-search.disabled .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-disabled-text-color);
    caret-color: var(--okd-input-search-disabled-caret-color);
    color: var(--okd-input-search-disabled-text-color)
}

.okui-input-search.disabled .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-disabled-placeholder-color);
    color: var(--okd-input-search-disabled-placeholder-color)
}

.okui-input-search.disabled .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-disabled-placeholder-color);
    color: var(--okd-input-search-disabled-placeholder-color);
    opacity: 1
}

.okui-input-search.disabled .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-disabled-placeholder-color);
    color: var(--okd-input-search-disabled-placeholder-color)
}

.okui-input-search.error .okui-input-box {
    background: var(--okd-input-search-error-background);
    border: thin solid var(--okd-input-search-error-border-color);
    box-shadow: var(--okd-input-search-error-shadow)
}

.okui-input-search.error .okui-input-box .okui-input-input {
    -webkit-text-fill-color: var(--okd-input-search-error-text-color);
    caret-color: var(--okd-input-search-error-caret-color);
    color: var(--okd-input-search-error-text-color)
}

.okui-input-search.error .okui-input-box .okui-input-input::-webkit-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-error-placeholder-color);
    color: var(--okd-input-search-error-placeholder-color)
}

.okui-input-search.error .okui-input-box .okui-input-input:-moz-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-error-placeholder-color);
    color: var(--okd-input-search-error-placeholder-color);
    opacity: 1
}

.okui-input-search.error .okui-input-box .okui-input-input::-ms-input-placeholder {
    -webkit-text-fill-color: var(--okd-input-search-error-placeholder-color);
    color: var(--okd-input-search-error-placeholder-color)
}

.okui-input-verify {
    display: flex;
    flex-direction: row;
    position: relative
}

.okui-input-verify * {
    box-sizing: border-box
}

.okui-input-verify .okui-input-verify-input:focus {
    border: 1px solid var(--okd-input-focus-border-color);
    box-shadow: var(--okd-input-focus-shadow)
}

.okui-input-verify .okui-input-verify-input {
    align-items: center;
    background: transparent;
    background: var(--okd-input-default-background);
    border: thin solid var(--okd-input-default-border-color);
    box-shadow: var(--okd-input-default-shadow);
    caret-color: var(--okd-input-focus-caret-color);
    color: var(--okd-input-default-text-color);
    display: flex;
    font-family: inherit;
    outline: none;
    text-align: center;
    transition: border-color .3s, box-shadow .3s
}

.okui-input-verify .okui-input-verify-input:-webkit-autofill {
    -webkit-text-fill-color: var(--okd-input-default-text-color) !important;
    border: none;
    -webkit-box-shadow: 0 0 0 30px var(--okd-input-default-background) inset
}

.okui-input-verify .okui-input-verify-input.input-xl {
    border-radius: 6px;
    font-size: 26px;
    height: 44px;
    margin-right: 8px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-xl.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 44px
}

.okui-input-verify .okui-input-verify-input.input-xl:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.input-lg {
    border-radius: 6px;
    font-size: 26px;
    height: 44px;
    margin-right: 8px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-lg.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 44px
}

.okui-input-verify .okui-input-verify-input.input-lg:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.input-xs {
    border-radius: 6px;
    font-size: 26px;
    height: 44px;
    margin-right: 8px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-xs.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 44px
}

.okui-input-verify .okui-input-verify-input.input-xs:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.input-sm {
    border-radius: 6px;
    font-size: 20px;
    height: 40px;
    margin-right: 10px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-sm.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 40px
}

.okui-input-verify .okui-input-verify-input.input-sm:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.input-md {
    border-radius: 6px;
    font-size: 26px;
    height: 44px;
    margin-right: 8px;
    width: 40px
}

.okui-input-verify .okui-input-verify-input.input-md.auto-size {
    height: -moz-fit-content;
    height: fit-content;
    min-height: 44px
}

.okui-input-verify .okui-input-verify-input.input-md:last-child {
    margin-right: 0
}

.okui-input-verify .okui-input-verify-input.error {
    border-color: var(--okd-input-verify-error-border-color, var(--okd-input-error-border-color))
}

.okui-input-verify .okui-input-verify-input.disabled {
    -webkit-text-fill-color: var(--okd-input-disabled-text-color);
    background: var(--okd-input-disabled-background);
    border: thin solid var(--okd-input-disabled-border-color);
    box-shadow: var(--okd-input-disabled-shadow);
    caret-color: var(--okd-input-disabled-caret-color);
    color: var(--okd-input-disabled-text-color);
    cursor: not-allowed
}

.okui-image-preview-container {
    height: 100%;
    text-align: center;
    width: 100%
}

.okui-image-preview-img {
    cursor: grab;
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle
}

.okui-image-preview-picture {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}

.okui-image-preview-close-btn {
    align-items: center;
    background-color: hsla(0, 0%, 5%, .2);
    background-color: var(--okd-imageviewer-preview-close-btn-background-color, hsla(0, 0%, 5%, .2));
    border-radius: 50%;
    color: var(--okd-color-content-inverse);
    color: var(--okd-imageviewer-preview-close-btn-color, var(--okd-color-content-inverse));
    cursor: pointer;
    display: flex;
    height: 40px;
    height: var(--okd-imageviewer-preview-close-btn-height, 40px);
    justify-content: center;
    position: absolute;
    right: 16px;
    right: var(--okd-imageviewer-preview-close-btn-right, 16px);
    top: 16px;
    top: var(--okd-imageviewer-preview-close-btn-top, 16px);
    width: 40px;
    width: var(--okd-imageviewer-preview-close-btn-width, 40px)
}

.okui-image-preview-close-btn .okui-image-preview-close-btn-icon {
    font-size: 24px;
    font-size: var(--okd-imageviewer-preview-close-btn-icon-font-size, 24px)
}

.okui-image-preview-toolbar {
    align-items: center;
    background-color: hsla(0, 0%, 5%, .2);
    background-color: var(--okd-imageviewer-preview-toolbar-background-color, hsla(0, 0%, 5%, .2));
    border-radius: 24px;
    border-radius: var(--okd-imageviewer-preview-toolbar-border-radius, 24px);
    bottom: 24px;
    bottom: var(--okd-imageviewer-preview-toolbar-bottom, 24px);
    color: var(--okd-color-content-inverse);
    color: var(--okd-imageviewer-preview-toolbar-color, var(--okd-color-content-inverse));
    display: inline-flex;
    height: 48px;
    height: var(--okd-imageviewer-preview-toolbar-height, 48px);
    left: 50%;
    padding: 0 24px;
    padding: 0 var(--okd-imageviewer-preview-toolbar-padding-horizontal, 24px);
    position: absolute;
    transform: translateX(-50%)
}

.okui-image-preview-toolbar .okui-image-preview-toolbar-action+.okui-image-preview-toolbar-action {
    margin-left: 24px;
    margin-left: var(--okd-imageviewer-preview-toolbar-margin-left, 24px)
}

.okui-image-preview-toolbar .okui-image-preview-toolbar-icon {
    cursor: pointer;
    display: inline-block;
    text-align: center
}

.okui-image-preview-toolbar .okui-image-preview-toolbar-icon .iconfont {
    font-size: 24px;
    font-size: var(--okd-imageviewer-preview-toolbar-icon-font-size, 24px)
}

.okui-image-preview-toolbar .okui-image-preview-toolbar-action-disabled .okui-image-preview-toolbar-icon {
    color: var(--okd-color-content-disabled);
    color: var(--okd-imageviewer-preview-toolbar-disabled-color, var(--okd-color-content-disabled));
    cursor: not-allowed
}

.okui-alert {
    border-radius: var(--okd-alert-box-border-radius);
    box-sizing: border-box;
    display: inline-flex;
    padding: var(--okd-alert-box-padding-vertical) var(--okd-alert-box-padding-horizontal);
    position: relative;
    width: 100%
}

.okui-alert.closable {
    padding-right: 44px
}

.okui-alert * {
    box-sizing: border-box
}

.okui-alert .okui-alert-icon {
    align-items: center;
    display: flex;
    font-size: 20px;
    font-size: var(--okd-alert-icon-tip-size, 20px);
    height: 20px;
    height: var(--okd-alert-icon-tip-size, 20px);
    justify-content: center;
    width: 20px;
    width: var(--okd-alert-icon-tip-size, 20px)
}

.okui-alert-msg-box {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.okui-alert-icon+.okui-alert-msg-box {
    margin-left: 15px;
    margin-left: var(--okd-alert-box-margin-left, 15px)
}

.okui-alert-title {
    font-size: var(--okd-alert-title-font-size);
    font-weight: 500;
    line-height: var(--okd-alert-title-line-height)
}

.okui-alert-desc {
    font-size: var(--okd-alert-text-font-size);
    font-weight: 400;
    line-height: var(--okd-alert-text-line-height)
}

.okui-alert-title+.okui-alert-desc {
    margin-top: 4px;
    margin-top: var(--okd-alert-desc-margin-top, 4px)
}

.okui-alert-link {
    font-weight: 500;
    text-decoration: none
}

.okui-alert-desc-list {
    margin-block-end: 0;
    margin-block-start: 4px;
    padding-inline-start: 17px
}

.okui-alert-action-box {
    margin-bottom: 8px;
    margin-bottom: var(--okd-alert-action-box-margin-bottom, 8px);
    margin-top: 21px;
    margin-top: var(--okd-alert-action-box-margin-top, 21px)
}

.okui-alert-action {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--okd-alert-action-font-size);
    font-weight: 500;
    line-height: var(--okd-alert-action-line-height);
    outline: 0;
    padding: 0
}

.okui-alert-action:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-alert-action+.okui-alert-action {
    margin-left: 32px;
    margin-left: var(--okd-alert-action-margin-left, 32px)
}

.okui-alert .okui-alert-close {
    cursor: pointer;
    font-size: 20px;
    font-size: var(--okd-alert-icon-close-size, 20px);
    line-height: 1;
    position: absolute;
    right: 12px
}

.okui-alert.normal-alert {
    background: var(--okd-alert-normal-background)
}

.okui-alert.normal-alert .okui-alert-icon {
    color: var(--okd-alert-normal-icon-color)
}

.okui-alert.normal-alert .okui-alert-title {
    color: var(--okd-alert-normal-title-color)
}

.okui-alert.normal-alert .okui-alert-desc {
    color: var(--okd-alert-normal-desc-color)
}

.okui-alert.normal-alert .okui-alert-close {
    color: var(--okd-color-gray-300);
    color: var(--okd-alert-close-color, var(--okd-color-gray-300))
}

.okui-alert.normal-alert .okui-alert-link {
    border-bottom: 1px solid var(--okd-alert-normal-link-color);
    color: var(--okd-alert-normal-link-color);
    text-decoration: none
}

.okui-alert.normal-alert .okui-alert-action {
    color: var(--okd-alert-normal-action-color)
}

.okui-alert.success-alert {
    background: var(--okd-alert-success-background)
}

.okui-alert.success-alert .okui-alert-icon {
    color: var(--okd-alert-success-icon-color)
}

.okui-alert.success-alert .okui-alert-title {
    color: var(--okd-alert-success-title-color)
}

.okui-alert.success-alert .okui-alert-desc {
    color: var(--okd-alert-success-desc-color)
}

.okui-alert.success-alert .okui-alert-close {
    color: var(--okd-color-gray-300);
    color: var(--okd-alert-close-color, var(--okd-color-gray-300))
}

.okui-alert.success-alert .okui-alert-link {
    border-bottom: 1px solid var(--okd-alert-success-link-color);
    color: var(--okd-alert-success-link-color);
    text-decoration: none
}

.okui-alert.success-alert .okui-alert-action {
    color: var(--okd-alert-success-action-color)
}

.okui-alert.info-alert {
    background: var(--okd-alert-info-background)
}

.okui-alert.info-alert .okui-alert-icon {
    color: var(--okd-alert-info-icon-color)
}

.okui-alert.info-alert .okui-alert-title {
    color: var(--okd-alert-info-title-color)
}

.okui-alert.info-alert .okui-alert-desc {
    color: var(--okd-alert-info-desc-color)
}

.okui-alert.info-alert .okui-alert-close {
    color: var(--okd-color-gray-300);
    color: var(--okd-alert-close-color, var(--okd-color-gray-300))
}

.okui-alert.info-alert .okui-alert-link {
    border-bottom: 1px solid var(--okd-alert-info-link-color);
    color: var(--okd-alert-info-link-color);
    text-decoration: none
}

.okui-alert.info-alert .okui-alert-action {
    color: var(--okd-alert-info-action-color)
}

.okui-alert.warn-alert {
    background: var(--okd-alert-warn-background)
}

.okui-alert.warn-alert .okui-alert-icon {
    color: var(--okd-alert-warn-icon-color)
}

.okui-alert.warn-alert .okui-alert-title {
    color: var(--okd-alert-warn-title-color)
}

.okui-alert.warn-alert .okui-alert-desc {
    color: var(--okd-alert-warn-desc-color)
}

.okui-alert.warn-alert .okui-alert-close {
    color: var(--okd-color-gray-300);
    color: var(--okd-alert-close-color, var(--okd-color-gray-300))
}

.okui-alert.warn-alert .okui-alert-link {
    border-bottom: 1px solid var(--okd-alert-warn-link-color);
    color: var(--okd-alert-warn-link-color);
    text-decoration: none
}

.okui-alert.warn-alert .okui-alert-action {
    color: var(--okd-alert-warn-action-color)
}

.okui-alert.error-alert {
    background: var(--okd-alert-error-background)
}

.okui-alert.error-alert .okui-alert-icon {
    color: var(--okd-alert-error-icon-color)
}

.okui-alert.error-alert .okui-alert-title {
    color: var(--okd-alert-error-title-color)
}

.okui-alert.error-alert .okui-alert-desc {
    color: var(--okd-alert-error-desc-color)
}

.okui-alert.error-alert .okui-alert-close {
    color: var(--okd-color-gray-300);
    color: var(--okd-alert-close-color, var(--okd-color-gray-300))
}

.okui-alert.error-alert .okui-alert-link {
    border-bottom: 1px solid var(--okd-alert-error-link-color);
    color: var(--okd-alert-error-link-color);
    text-decoration: none
}

.okui-alert.error-alert .okui-alert-action {
    color: var(--okd-alert-error-action-color)
}

.okui-tag-sm {
    --okd-tag-inner-height: var(--okd-tag-sm-height, 16px);
    border-radius: 4px;
    border-radius: var(--okd-tag-sm-border-radius, 4px);
    border-width: 1px;
    border-width: var(--okd-tag-sm-border-width, 1px);
    font-size: 12px;
    font-size: var(--okd-tag-sm-font-size, 12px);
    font-weight: 400;
    font-weight: var(--okd-tag-sm-font-weight, 400);
    line-height: 16px;
    line-height: var(--okd-tag-sm-line-height, 16px);
    padding: 2px 4px;
    padding: var(--okd-tag-sm-padding-vertical, 2px) var(--okd-tag-sm-padding-horizontal, 4px)
}

.okui-tag-sm .okui-tag-icon {
    font-size: 12px;
    font-size: var(--okd-tag-sm-icon-size, 12px)
}

.okui-tag-md {
    --okd-tag-inner-height: var(--okd-tag-md-height, 20px);
    border-radius: 4px;
    border-radius: var(--okd-tag-md-border-radius, 4px);
    border-width: 1px;
    border-width: var(--okd-tag-md-border-width, 1px);
    font-size: 12px;
    font-size: var(--okd-tag-md-font-size, 12px);
    font-weight: 400;
    font-weight: var(--okd-tag-md-font-weight, 400);
    line-height: 16px;
    line-height: var(--okd-tag-md-line-height, 16px);
    padding: 2px 4px;
    padding: var(--okd-tag-md-padding-vertical, 2px) var(--okd-tag-md-padding-horizontal, 4px)
}

.okui-tag-md .okui-tag-icon {
    font-size: 16px;
    font-size: var(--okd-tag-md-icon-size, 16px)
}

.okui-tag-lg {
    --okd-tag-inner-height: var(--okd-tag-lg-height, 24px);
    border-radius: 4px;
    border-radius: var(--okd-tag-lg-border-radius, 4px);
    border-width: 1px;
    border-width: var(--okd-tag-lg-border-width, 1px);
    font-size: 12px;
    font-size: var(--okd-tag-lg-font-size, 12px);
    font-weight: 400;
    font-weight: var(--okd-tag-lg-font-weight, 400);
    line-height: 16px;
    line-height: var(--okd-tag-lg-line-height, 16px);
    padding: 2px 4px;
    padding: var(--okd-tag-lg-padding-vertical, 2px) var(--okd-tag-lg-padding-horizontal, 4px)
}

.okui-tag-lg .okui-tag-icon {
    font-size: 16px;
    font-size: var(--okd-tag-lg-icon-size, 16px)
}

.okui-tag-fixed-height {
    height: var(--okd-tag-inner-height);
    padding-bottom: 0;
    padding-top: 0
}

.okui-tag {
    align-items: center;
    border-style: solid;
    box-sizing: border-box;
    display: inline-flex
}

.okui-tag-ellipsis {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.okui-tag-icon {
    padding-right: 2px
}

.okui-tag-fill-lime {
    background-color: var(--okd-tag-fill-lime-background-color);
    border-color: var(--okd-tag-fill-lime-border-color);
    color: var(--okd-tag-fill-lime-font-color)
}

.okui-tag.okui-tag-fill-lime {
    font-weight: 700
}

.okui-image-viewer {
    cursor: pointer;
    display: inline-block;
    position: relative
}

.okui-image-viewer-mask {
    align-items: center;
    color: var(--okd-color-content-inverse);
    color: var(--okd-imageviewer-mask-color, var(--okd-color-content-inverse));
    display: none;
    font-size: 14px;
    font-size: var(--okd-imageviewer-mask-font-size, 14px);
    font-weight: 500;
    font-weight: var(--okd-imageviewer-mask-font-weight, 500);
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%
}

.okui-image-viewer-mask .okui-image-viewer-eye {
    display: inline-block;
    font-size: 16px;
    font-size: var(--okd-imageviewer-mask-eye-font-size, 16px);
    margin-right: 8px;
    margin-right: var(--okd-imageviewer-mask-eye-margin-right, 8px)
}

@media (min-width:768px) {
    .okui-image-viewer:hover .okui-image-viewer-mask {
        display: flex
    }
}

.okui-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%
}

.okui-empty-img {
    height: var(--okd-empty-img-height);
    margin-bottom: var(--okd-empty-img-margin-bottom);
    width: var(--okd-empty-img-width)
}

.okui-empty-title {
    color: var(--okd-empty-title-color);
    font-size: var(--okd-empty-title-font-size);
    font-weight: 400;
    font-weight: var(--okd-empty-title-font-weight, 400);
    line-height: var(--okd-empty-title-light-height);
    margin-bottom: var(--okd-empty-title-margin-bottom);
    text-align: center
}

.okui-empty-title:last-child {
    margin-bottom: 0
}

.okui-empty-only-title {
    margin-bottom: var(--okd-empty-desc-margin-bottom)
}

.okui-empty-only-title:last-child {
    margin-bottom: 0
}

.okui-empty-description {
    color: var(--okd-empty-desc-color);
    font-size: var(--okd-empty-desc-font-size);
    font-weight: 400;
    font-weight: var(--okd-empty-desc-font-weight, 400);
    line-height: var(--okd-empty-desc-light-height);
    margin-bottom: var(--okd-empty-desc-margin-bottom);
    text-align: center
}

.okui-empty-description:last-child {
    margin-bottom: 0
}

.okui-pagination {
    align-items: center;
    display: flex;
    font-size: var(--okd-pagination-default-font-size);
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.okui-pagination-left {
    display: flex;
    justify-content: flex-start
}

.okui-pagination-center {
    display: flex;
    justify-content: center
}

.okui-pagination-right {
    display: flex;
    justify-content: flex-end
}

@media (max-width:767px) {
    .okui-pagination-hide {
        display: none
    }
}

.okui-pagination>li {
    list-style: none;
    outline: none
}

.okui-pagination>li+li {
    margin-left: var(--okd-pagination-default-margin-horizontal-size)
}

.okui-pagination:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden
}

.okui-pagination-item {
    align-items: center;
    background: var(--okd-pagination-normal-background-color);
    border-bottom: initial;
    border-radius: var(--okd-pagination-default-border-radius);
    box-sizing: border-box;
    color: var(--okd-pagination-normal-text-new-color);
    cursor: pointer;
    display: flex;
    float: left;
    height: var(--okd-pagination-default-height-size);
    justify-content: center;
    line-height: var(--okd-pagination-default-height-size);
    list-style: none;
    min-width: var(--okd-pagination-default-min-width-size);
    outline: none;
    padding: var(--okd-pagination-default-padding-vertical-size) var(--okd-pagination-default-padding-horizontal-size);
    text-align: center
}

.okui-pagination-item:focus-visible {
    border-radius: var(--okd-pagination-default-border-radius);
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-pagination-item.hover-status,
.okui-pagination-item:hover:not(.okui-pagination-item-active) {
    background: var(--okd-pagination-hover-background-color);
    color: var(--okd-pagination-hover-text-new-color)
}

.okui-pagination-item-active {
    background: var(--okd-pagination-active-background-color);
    color: var(--okd-pagination-active-text-new-color)
}

.okui-pagination-item-link {
    text-decoration: none
}

.okui-pagination-item+.okui-pagination-item {
    margin-left: var(--okd-pagination-default-margin-horizontal-size)
}

.okui-pagination-jump-next,
.okui-pagination-jump-prev {
    margin: 0 var(--okd-pagination-default-margin-horizontal-size);
    outline: none
}

.okui-pagination-jump-next .jump-icon,
.okui-pagination-jump-prev .jump-icon {
    font-size: 18px;
    margin-top: 1px
}

.okui-pagination-jump-next.hover-status .jump-icon,
.okui-pagination-jump-next:hover .jump-icon,
.okui-pagination-jump-prev.hover-status .jump-icon,
.okui-pagination-jump-prev:hover .jump-icon {
    color: var(--okd-pagination-icon-jump-hover-text-color)
}

.okui-pagination-jump-next-no-spacing {
    margin-right: 0
}

.okui-pagination-jump-next,
.okui-pagination-jump-prev,
.okui-pagination-next,
.okui-pagination-prev {
    cursor: pointer;
    float: left;
    height: var(--okd-pagination-default-height-size);
    line-height: var(--okd-pagination-default-height-size);
    list-style: none;
    min-width: var(--okd-pagination-default-min-width-size);
    text-align: center
}

.okui-pagination-jump-next,
.okui-pagination-jump-prev {
    color: var(--okd-pagination-icon-jump-text-color)
}

.okui-pagination-jump-next:focus-visible,
.okui-pagination-jump-prev:focus-visible {
    border-radius: 100px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-pagination-next:focus-visible,
.okui-pagination-prev:focus-visible {
    border-radius: 100px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-pagination-next .iconfont,
.okui-pagination-prev .iconfont {
    font-size: var(--okd-pagination-icon-font-size)
}

.okui-pagination-next.hover-status,
.okui-pagination-next:not(.okui-pagination-disabled),
.okui-pagination-prev.hover-status,
.okui-pagination-prev:not(.okui-pagination-disabled) {
    background: var(--okd-pagination-normal-background-color);
    border-radius: var(--okd-pagination-default-border-radius);
    color: var(--okd-pagination-normal-text-new-color)
}

.okui-pagination-next.hover-status:hover,
.okui-pagination-next:not(.okui-pagination-disabled):hover,
.okui-pagination-prev.hover-status:hover,
.okui-pagination-prev:not(.okui-pagination-disabled):hover {
    background: var(--okd-pagination-hover-background-color);
    color: var(--okd-pagination-hover-text-new-color)
}

.okui-pagination-prev {
    margin-right: var(--okd-pagination-default-margin-horizontal-size)
}

.okui-pagination-next {
    margin-left: var(--okd-pagination-default-margin-horizontal-size)
}

.okui-pagination-prev+.okui-pagination-next {
    margin-left: 0
}

.okui-pagination-disabled {
    color: var(--okd-pagination-disabled-text-new-color);
    cursor: not-allowed
}

.okui-pagination-simple-icon {
    margin: 0
}

.okui-pagination-simple-pager {
    color: var(--okd-pagination-simple-default-text-color);
    float: left;
    line-height: var(--okd-pagination-simple-default-line-height);
    list-style: none
}

.okui-pagination-simple-pager-inner {
    margin: var(--okd-pagination-simple-slash-margin-vertical) var(--okd-pagination-simple-slash-margin-horizontal-size)
}

.okui-pagination.okui-pagination-load {
    background: var(--okd-pagination-load-background);
    color: var(--okd-pagination-load-text-color);
    display: none;
    margin: 24px auto
}

@media (max-width:767px) {

    .okui-pagination.okui-pagination-load,
    .okui-pagination.okui-pagination-loading {
        display: flex
    }
}

@media only screen and (max-width:1024px) {

    .okui-pagination-item-after-jump-prev,
    .okui-pagination-item-before-jump-next {
        display: none
    }
}

.okui-table-thead {
    background-color: var(--okd-table-thead-bg-color);
    background-color: var(--okd-inner-table-background, var(--okd-table-thead-bg-color))
}

.okui-table-thead .okui-table-row-slide .okui-table-cell:first-child {
    padding-left: 0
}

.okui-table-thead .okui-table-row-slide .okui-table-cell:last-child {
    padding-right: 0
}

.okui-table-thead .okui-table-cell {
    background-color: var(--okd-table-thead-cell-bg-color);
    background-color: var(--okd-inner-table-background, var(--okd-table-thead-cell-bg-color));
    color: #959dad;
    color: var(--okd-table-thead-cell-font-color, #959dad);
    font-size: 12px;
    font-size: var(--okd-table-thead-cell-font-size, 12px);
    font-weight: 400;
    padding: 12px;
    padding: var(--okd-table-thead-cell-padding-vertical, 12px) var(--okd-table-thead-cell-padding-horizontal, 12px);
    position: relative;
    text-align: left
}

.okui-table-thead .okui-table-cell.okui-table-column-has-sorters {
    cursor: pointer;
    padding: 0 12px;
    transition: padding .3s
}

.okui-table-thead .okui-table-cell-sorters {
    align-items: center;
    display: inline-flex
}

.okui-table-thead .okui-table-cell-sorters-between {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.okui-table-thead .okui-table-cell-sorters-between .okui-table-cell-title {
    flex: 1 1;
    width: calc(100% - 15px);
    width: calc(100% - var(--okd-table-cell-sorter-icon-font-size, 12px) - 3px)
}

.okui-table-thead .okui-table-cell-sorter {
    font: 12px;
    line-height: 12px;
    margin-left: 3px
}

.okui-table-thead .okui-table-cell-sorter-inner {
    display: inline-flex;
    flex-direction: column;
    transform: scale(.5);
    transform: scale(var(--okd-table-cell-sorter-inner-scale, .5))
}

.okui-table-thead .okui-table-cell-sorter-inner .okui-table-cell-filled-down,
.okui-table-thead .okui-table-cell-sorter-inner .okui-table-cell-filled-up {
    color: #ced3de;
    color: var(--okd-table-cell-sorter-icon-color, #ced3de);
    font-size: 12px;
    font-size: var(--okd-table-cell-sorter-icon-font-size, 12px)
}

.okui-table-thead .okui-table-cell-sorter-inner .okui-table-cell-filled-down.active,
.okui-table-thead .okui-table-cell-sorter-inner .okui-table-cell-filled-up.active {
    color: #000;
    color: var(--okd-table-cell-sorter-icon-active-color, #000)
}

.okui-table-thead-sticky {
    position: sticky;
    top: 0;
    z-index: 3
}

.okui-table-tbody {
    position: relative
}

.okui-table-tbody .okui-table-row {
    background-color: var(--okd-table-tbody-cell-bg-color);
    background-color: var(--okd-inner-table-background, var(--okd-table-tbody-cell-bg-color))
}

.okui-table-tbody .okui-table-row-vir {
    display: grid;
    grid-template-columns: var(--okd-inner-table-grid-template-columns)
}

.okui-table-tbody .okui-table-row-hover:hover {
    background-color: #000;
    background-color: var(--okd-table-tbody-row-bg-hover-color, #000)
}

.okui-table-tbody .okui-table-row-slide .okui-table-cell:first-child {
    padding-left: 0
}

.okui-table-tbody .okui-table-row-slide .okui-table-cell:last-child {
    padding-right: 0
}

.okui-table-tbody .okui-table-cell {
    background-color: inherit;
    color: #3f475a;
    color: var(--okd-table-tbody-cell-font-color, #3f475a);
    font-size: 12px;
    font-size: var(--okd-table-tbody-cell-font-size, 12px);
    font-weight: 400;
    padding: 12px;
    padding: var(--okd-table-tbody-cell-padding-vertical, 12px) var(--okd-table-tbody-cell-padding-horizontal, 12px);
    text-align: left
}

.okui-table-tbody .okui-table-expanded-row .okui-table-cell {
    padding: 0
}

.okui-table-wrapper {
    position: relative;
    width: 100%
}

.okui-table-wrapper * {
    box-sizing: border-box
}

.okui-table-wrapper .okui-table table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%
}

.okui-table-wrapper .okui-table .okui-table-cell {
    word-wrap: break-word;
    position: relative
}

.okui-table-wrapper .okui-table .okui-table-cell .okui-table-cell-ellipsis,
.okui-table-wrapper .okui-table .okui-table-cell .okui-table-cell-ellipsis>* {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.okui-table-wrapper .okui-table .okui-table-cell .okui-table-cell-ellipsis-tooltip {
    display: inline-block;
    max-width: 100%
}

.okui-table-wrapper .okui-table .okui-table-cell-border-bottom {
    border-bottom: 1px solid #f0f0f0;
    border-bottom: 1px solid var(--okd-table-cell-bordered-color, #f0f0f0);
        font-size: 14px;
    font-weight: 600;
    color: #000;
}

.okui-table-wrapper .okui-table .okui-table-cell-border-right {
    border-right: 1px solid #f0f0f0;
    border-right: 1px solid var(--okd-table-cell-bordered-color, #f0f0f0)
}

.okui-table-wrapper .okui-table .okui-table-cell-border-right:last-child {
    border-right: 0
}

.okui-table-wrapper .okui-table-bordered {
    border: 1px solid #f0f0f0;
    border: 1px solid var(--okd-table-cell-bordered-color, #f0f0f0);
    border-bottom: 0
}

.okui-table-wrapper .okui-table-bordered .okui-table-tbody tr,
.okui-table-wrapper .okui-table-bordered .okui-table-thead tr {
    position: relative
}

.okui-table-wrapper .okui-table .okui-table-sticky-holder {
    position: sticky;
    top: 0;
    z-index: 3
}

.okui-table-wrapper .okui-table-pagination {
    margin-top: 10px;
    margin-top: var(--okd-table-pagination-margin-top, 10px)
}

.okui-table-wrapper .okui-table-fixed-column-box-shadow.okui-table-ping-left .okui-table-cell-fix-left,
.okui-table-wrapper .okui-table-ping-left .okui-table-cell-fix-left-last,
.okui-table-wrapper .okui-table-ping-left .okui-table-cell-fix-right-first,
.okui-table-wrapper .okui-table-ping-right .okui-table-cell-fix-left-last,
.okui-table-wrapper .okui-table-ping-right .okui-table-cell-fix-right-first {
    z-index: 2
}

.okui-table-wrapper .okui-table-fixed-column-box-shadow.okui-table-ping-left .okui-table-cell-fix-left.okui-table-cell-fix-left-first:after,
.okui-table-wrapper .okui-table-fixed-column-box-shadow.okui-table-ping-left .okui-table-cell-fix-left.okui-table-cell-fix-left-last:after {
    bottom: 0;
    box-shadow: inset 10px 0 8px -8px #00000026;
    box-shadow: inset var(--okd-table-fix-left-box-shadow, 10px 0 8px -8px #00000026);
    content: "";
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(100%);
    transition: box-shadow .3s;
    width: 30px;
    width: var(--okd-table-fix-left-box-inner-width, 30px)
}

.okui-table-wrapper .okui-table-fixed-column-box-shadow.okui-table-ping-right .okui-table-cell-fix-right {
    z-index: 2
}

.okui-table-wrapper .okui-table-fixed-column-box-shadow.okui-table-ping-right .okui-table-cell-fix-right.okui-table-cell-fix-right-first:after,
.okui-table-wrapper .okui-table-fixed-column-box-shadow.okui-table-ping-right .okui-table-cell-fix-right.okui-table-cell-fix-right-last:after {
    bottom: 0;
    box-shadow: inset -10px 0 8px -8px #00000026;
    box-shadow: inset var(--okd-table-fix-right-box-shadow, -10px 0 8px -8px #00000026);
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(-100%);
    transition: box-shadow .3s;
    width: 30px;
    width: var(--okd-table-fix-right-box-inner-width, 30px)
}

.okui-table-wrapper .okui-table-placeholder {
    display: flex;
    justify-content: center;
    padding: 100px 0;
    padding: var(--okd-table-placeholder-padding-vertical, 100px) var(--okd-table-placeholder-padding-horizontal, 0)
}

.okui-table-full-height {
    height: 100%
}

.okui-table-scroll-style ::-webkit-scrollbar {
    border-radius: 8px;
    height: 6px
}

.okui-table-virtual-scroll-style ::-webkit-scrollbar {
    width: 0
}

.okui-table-scroll-style ::-webkit-scrollbar-thumb,
.okui-table-scroll-style ::-webkit-scrollbar-track {
    border-radius: 8px
}

.okui-table-scroll-style ::-webkit-scrollbar-button {
    display: none
}

.okui-table-scroll-style ::-webkit-scrollbar-corner {
    background-color: transparent
}

.okui-virtual-list-empty {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center
}

.okui-overflow {
    overflow: hidden
}

.okui-overflow-hidden {
    height: 0;
    opacity: 0;
    overflow-y: hidden;
    pointer-events: none;
    position: absolute
}

.okui-select-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: calc(100% - 48px);
    justify-content: center;
    min-height: 160px
}

.okui-select-empty .empty-text {
    color: var(--okd-select-empty-default-text-color)
}

.okui-select-empty .empty-text-sm {
    font-size: var(--okd-select-sm-empty-font-size)
}

.okui-select-empty .empty-text-md {
    font-size: var(--okd-select-md-empty-font-size)
}

.okui-select-empty .empty-text-xs {
    font-size: var(--okd-select-xs-empty-font-size)
}

.okui-select-empty .empty-text-lg {
    font-size: var(--okd-select-md-empty-font-size);
    font-size: var(--okd-select-lg-empty-font-size, var(--okd-select-md-empty-font-size))
}

.okui-select-empty .empty-text-xl {
    font-size: var(--okd-select-md-empty-font-size);
    font-size: var(--okd-select-xl-empty-font-size, var(--okd-select-md-empty-font-size))
}

.okui-select-empty .empty-text-mobile {
    font-size: 14px;
    font-size: var(--okd-select-mobile-empty-font-size, 14px)
}

.okui-select-item {
    align-items: center;
    color: var(--okd-select-option-default-text-color);
    cursor: pointer;
    display: flex;
    font-weight: 400;
    min-width: 90px
}

.okui-select-item.okui-select-item-active {
    background: var(--okd-select-option-active-bg);
    color: var(--okd-select-option-active-text-color)
}

.okui-select-item.hover,
.okui-select-item:hover {
    background: var(--okd-select-option-hover-bg);
    color: var(--okd-select-option-hover-text-color)
}

.okui-select-item.disabled {
    background: var(--okd-select-option-disabled-bg);
    color: var(--okd-select-option-disabled-text-color);
    cursor: not-allowed
}

.okui-select-item.disabled .okui-select-item-check {
    opacity: .2
}

.okui-select-item.align-center {
    justify-content: center
}

.okui-select-item.align-left {
    justify-content: flex-start
}

.okui-select-item.align-right {
    justify-content: flex-end
}

.okui-select-item-check {
    color: var(--okd-select-check-default-icon-color);
    margin-left: auto
}

.okui-select-item-title {
    color: var(--okd-select-common-title-color)
}

.okui-select-item-title-inner {
    display: inline-block
}

.okui-select-item-line {
    border-top: var(--okd-select-option-common-line-height) solid var(--okd-select-option-common-line-color);
    height: 0;
    margin: var(--okd-select-option-common-line-margin-vertical) 0;
    width: 100%
}

.okui-select-item-show-check .okui-select-item-active {
    background: var(--okd-select-option-active-bg)
}

.option-sm .okui-select-item-title {
    font-size: var(--okd-select-sm-title-font-size);
    line-height: var(--okd-select-sm-title-line-height);
    padding: var(--okd-select-sm-title-padding-top) var(--okd-select-sm-title-padding-horizontal) var(--okd-select-sm-title-padding-bottom)
}

.option-sm .okui-select-item {
    font-size: var(--okd-select-sm-option-font-size);
    line-height: var(--okd-select-sm-option-line-height);
    padding: var(--okd-select-sm-option-padding-vertical) var(--okd-select-sm-option-padding-horizontal)
}

.option-sm .okui-select-item-check {
    font-size: 18px;
    font-size: var(--okd-select-sm-option-icon-font-size, 18px);
    padding-left: 8px
}

.option-sm .okui-select-item.custom {
    padding: 0
}

.option-md .okui-select-item-title {
    font-size: var(--okd-select-md-title-font-size);
    line-height: var(--okd-select-md-title-line-height);
    padding: var(--okd-select-md-title-padding-top) var(--okd-select-md-title-padding-horizontal) var(--okd-select-md-title-padding-bottom)
}

.option-md .okui-select-item {
    font-size: var(--okd-select-md-option-font-size);
    line-height: var(--okd-select-md-option-line-height);
    padding: var(--okd-select-md-option-padding-vertical) var(--okd-select-md-option-padding-horizontal)
}

.option-md .okui-select-item-check {
    font-size: 18px;
    font-size: var(--okd-select-md-option-icon-font-size, 18px);
    padding-left: 8px
}

.option-md .okui-select-item.custom {
    padding: 0
}

.option-xs .okui-select-item-title {
    font-size: var(--okd-select-xs-title-font-size);
    line-height: var(--okd-select-xs-title-line-height);
    padding: var(--okd-select-xs-title-padding-top) var(--okd-select-xs-title-padding-horizontal) var(--okd-select-xs-title-padding-bottom)
}

.option-xs .okui-select-item {
    font-size: var(--okd-select-xs-option-font-size);
    line-height: var(--okd-select-xs-option-line-height);
    padding: var(--okd-select-xs-option-padding-vertical) var(--okd-select-xs-option-padding-horizontal)
}

.option-xs .okui-select-item-check {
    font-size: 18px;
    font-size: var(--okd-select-xs-option-icon-font-size, 18px);
    padding-left: 8px
}

.option-xs .okui-select-item.custom {
    padding: 0
}

.option-lg .okui-select-item-title {
    font-size: var(--okd-select-md-title-font-size);
    font-size: var(--okd-select-lg-title-font-size, var(--okd-select-md-title-font-size));
    line-height: var(--okd-select-md-title-line-height);
    line-height: var(--okd-select-lg-title-line-height, var(--okd-select-md-title-line-height));
    padding: var(--okd-select-lg-title-padding-top, var(--okd-select-md-title-padding-top)) var(--okd-select-lg-title-padding-horizontal, var(--okd-select-md-title-padding-horizontal)) var(--okd-select-lg-title-padding-bottom, var(--okd-select-md-title-padding-bottom))
}

.option-lg .okui-select-item {
    font-size: var(--okd-select-md-option-font-size);
    font-size: var(--okd-select-lg-option-font-size, var(--okd-select-md-option-font-size));
    line-height: var(--okd-select-md-option-line-height);
    line-height: var(--okd-select-lg-option-line-height, var(--okd-select-md-option-line-height));
    padding: var(--okd-select-lg-option-padding-vertical, var(--okd-select-md-option-padding-vertical)) var(--okd-select-lg-option-padding-horizontal, var(--okd-select-md-option-padding-horizontal))
}

.option-lg .okui-select-item-check {
    font-size: 18px;
    font-size: var(--okd-select-lg-option-icon-font-size, 18px);
    padding-left: 8px
}

.option-lg .okui-select-item.custom {
    padding: 0
}

.option-xl .okui-select-item-title {
    font-size: var(--okd-select-md-title-font-size);
    font-size: var(--okd-select-xl-title-font-size, var(--okd-select-md-title-font-size));
    line-height: var(--okd-select-md-title-line-height);
    line-height: var(--okd-select-xl-title-line-height, var(--okd-select-md-title-line-height));
    padding: var(--okd-select-xl-title-padding-top, var(--okd-select-md-title-padding-top)) var(--okd-select-xl-title-padding-horizontal, var(--okd-select-md-title-padding-horizontal)) var(--okd-select-xl-title-padding-bottom, var(--okd-select-md-title-padding-bottom))
}

.option-xl .okui-select-item {
    font-size: var(--okd-select-md-option-font-size);
    font-size: var(--okd-select-xl-option-font-size, var(--okd-select-md-option-font-size));
    line-height: var(--okd-select-md-option-line-height);
    line-height: var(--okd-select-xl-option-line-height, var(--okd-select-md-option-line-height));
    padding: var(--okd-select-xl-option-padding-vertical, var(--okd-select-md-option-padding-vertical)) var(--okd-select-xl-option-padding-horizontal, var(--okd-select-md-option-padding-horizontal))
}

.option-xl .okui-select-item-check {
    font-size: 18px;
    font-size: var(--okd-select-xl-option-icon-font-size, 18px);
    padding-left: 8px
}

.option-xl .okui-select-item.custom {
    padding: 0
}

@media (max-width:767px) {
    .okui-select-option:not(.drop-mode) .okui-select-item-container .okui-select-item-title {
        font-size: var(--okd-select-md-title-font-size);
        font-size: var(--okd-select-mobile-option-title-font-size, var(--okd-select-md-title-font-size));
        line-height: var(--okd-select-md-title-line-height);
        line-height: var(--okd-select-mobile-option-title-line-height, var(--okd-select-md-title-line-height));
        padding: var(--okd-select-mobile-option-title-padding-top, var(--okd-select-md-title-padding-top)) var(--okd-select-mobile-option-title-padding-horizontal, var(--okd-select-md-title-padding-horizontal)) var(--okd-select-mobile-option-title-padding-bottom, var(--okd-select-md-title-padding-bottom))
    }

    .okui-select-option:not(.drop-mode) .okui-select-item-container .okui-select-item {
        font-size: 16px;
        font-size: var(--okd-select-mobile-option-font-size, 16px);
        line-height: 20px;
        line-height: var(--okd-select-mobile-option-line-height, 20px);
        padding: 18px 16px;
        padding: var(--okd-select-mobile-option-padding-vertical, 18px) var(--okd-select-mobile-option-padding-horizontal, 16px)
    }

    .okui-select-option:not(.drop-mode) .okui-select-item-container .okui-select-item-check {
        font-size: 24px;
        font-size: var(--okd-select-mobile-option-icon-font-size, 24px)
    }

    .okui-select-option:not(.drop-mode) .okui-select-item-container .okui-select-item.custom {
        padding: 0
    }
}

.okui-select-search.focus .okui-input-box.okui-select-search-box,
.okui-select-search.hover .okui-input-box.okui-select-search-box,
.okui-select-search:focus .okui-input-box.okui-select-search-box,
.okui-select-search:hover .okui-input-box.okui-select-search-box {
    background-color: var(--okd-input-search-default-background);
    border-color: var(--okd-input-search-default-border-color);
    box-shadow: var(--okd-input-search-default-shadow)
}

.okui-select-search .okui-select-search-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.okui-select-search .okui-select-search-default-width {
    width: auto
}

.option-sm .okui-select-empty,
.option-sm .okui-select-search {
    margin: var(--okd-select-sm-search-margin-vertical) var(--okd-select-sm-search-margin-horizontal)
}

.option-md .okui-select-empty,
.option-md .okui-select-search {
    margin: var(--okd-select-md-search-margin-vertical) var(--okd-select-md-search-margin-horizontal)
}

.option-xs .okui-select-empty,
.option-xs .okui-select-search {
    margin: var(--okd-select-xs-search-margin-vertical) var(--okd-select-xs-search-margin-horizontal)
}

.option-lg .okui-select-empty,
.option-lg .okui-select-search {
    margin: var(--okd-select-lg-search-margin-vertical, var(--okd-select-md-search-margin-vertical)) var(--okd-select-lg-search-margin-horizontal, var(--okd-select-md-search-margin-horizontal))
}

.option-xl .okui-select-empty,
.option-xl .okui-select-search {
    margin: var(--okd-select-xl-search-margin-vertical, var(--okd-select-md-search-margin-vertical)) var(--okd-select-xl-search-margin-horizontal, var(--okd-select-md-search-margin-horizontal))
}

.okui-select-tag {
    align-items: center;
    background-color: #f2f2f2;
    background-color: var(--okd-select-tag-default-background, #f2f2f2);
    border-radius: 4px;
    border-radius: var(--okd-select-tag-border-radius, 4px);
    color: #000;
    color: var(--okd-select-tag-text-default-color, #000);
    cursor: inherit;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    margin-bottom: var(--okd-select-tag-margin-bottom, 4px);
    margin-right: 4px;
    margin-right: var(--okd-select-tag-margin-right, 4px);
    max-width: 100%;
    padding-left: 8px;
    padding-left: var(--okd-select-tag-padding-horizontal, 8px);
    padding-right: 8px;
    padding-right: var(--okd-select-tag-padding-horizontal, 8px)
}

.okui-select-tag-icon {
    color: #929292;
    color: var(--okd-select-tag-icon-default-color, #929292);
    cursor: pointer;
    padding-left: 4px;
    padding-left: var(--okd-select-tag-icon-padding-left, 4px)
}

.okui-select-tag-icon:hover {
    color: #000;
    color: var(--okd-select-tag-icon-hover-color, #000)
}

.okui-select-tag-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.okui-select-tag.disabled {
    background-color: #f2f2f2;
    background-color: var(--okd-select-tag-disabled-background, #f2f2f2);
    color: #929292;
    color: var(--okd-select-tag-text-disabled-color, #929292);
    pointer-events: none
}

.okui-select-tag-sm {
    font-size: 12px;
    font-size: var(--okd-select-sm-tag-text-font-size, 12px);
    height: 24px;
    height: var(--okd-select-sm-tag-height, 24px);
    line-height: 24px;
    line-height: var(--okd-select-sm-tag-height, 24px)
}

.okui-select-tag-sm .okui-select-tag-icon {
    font-size: 14px;
    font-size: var(--okd-select-sm-tag-icon-font-size, 14px)
}

.okui-select-tag-md {
    font-size: 14px;
    font-size: var(--okd-select-md-tag-text-font-size, 14px);
    height: 32px;
    height: var(--okd-select-md-tag-height, 32px);
    line-height: 32px;
    line-height: var(--okd-select-md-tag-height, 32px)
}

.okui-select-tag-md .okui-select-tag-icon {
    font-size: 16px;
    font-size: var(--okd-select-md-tag-icon-font-size, 16px)
}

.okui-select-tag-xs {
    font-size: 12px;
    font-size: var(--okd-select-xs-tag-text-font-size, 12px);
    height: 20px;
    height: var(--okd-select-xs-tag-height, 20px);
    line-height: 20px;
    line-height: var(--okd-select-xs-tag-height, 20px)
}

.okui-select-tag-xs .okui-select-tag-icon {
    font-size: 10px;
    font-size: var(--okd-select-xs-tag-icon-font-size, 10px)
}

.okui-select-tag-lg {
    font-size: 14px;
    font-size: var(--okd-select-lg-tag-text-font-size, 14px);
    height: 36px;
    height: var(--okd-select-lg-tag-height, 36px);
    line-height: 36px;
    line-height: var(--okd-select-lg-tag-height, 36px)
}

.okui-select-tag-lg .okui-select-tag-icon {
    font-size: 16px;
    font-size: var(--okd-select-lg-tag-icon-font-size, 16px)
}

.okui-select-tag-xl {
    font-size: 14px;
    font-size: var(--okd-select-xl-tag-text-font-size, 14px);
    height: 40px;
    height: var(--okd-select-xl-tag-height, 40px);
    line-height: 40px;
    line-height: var(--okd-select-xl-tag-height, 40px)
}

.okui-select-tag-xl .okui-select-tag-icon {
    font-size: 16px;
    font-size: var(--okd-select-xl-tag-icon-font-size, 16px)
}

.okui-select-footer-dialog>.okui-select-footer {
    align-items: center;
    display: flex
}

.okui-select-footer-dialog>.okui-select-footer>.okui-select-footer-cancel {
    max-width: 30%
}

.okui-select-footer-dialog>.okui-select-footer>.okui-select-footer-confirm {
    margin-left: 12px
}

.okui-select-option-dialog-container {
    background: var(--okd-select-drop-box-bg) !important;
    padding: var(--okd-select-mobile-option-container-padding-vertical) 0
}

.okui-select-option.fixed-height {
    height: calc(100% - 32px);
    max-height: none
}

.okui-select-option.fixed-height .okui-dialog-scroll-box {
    display: flex;
    flex-direction: column;
    overflow-y: hidden
}

.okui-select-option.fixed-height .okui-dialog-container {
    display: flex;
    flex-direction: column
}

.okui-select-option.fixed-height .okui-select-item-container {
    flex: 1 1
}

.okui-select-option.fixed-height .okui-select-item-container.okui-select-item-container-real {
    -webkit-overflow-scrolling: touch;
    overflow: auto
}

.okui-select-option.fixed-height.okui-select-option-fit-to-height {
    height: auto;
    max-height: calc(100% - 32px)
}

.okui-select-option.fixed-height.okui-select-option-fit-to-height .okui-dialog-container {
    max-height: 100%;
    overflow: auto
}

.okui-select-option-pc {
    cursor: auto;
    display: flex;
    flex-direction: column;
    max-height: 248px;
    padding-top: var(--okd-select-drop-box-margin-top)
}

.okui-select-option-pc .okui-select-option-box {
    background: var(--okd-select-drop-box-bg);
    border: 1px solid var(--okd-select-drop-box-border-color);
    border-radius: var(--okd-select-drop-box-border-radius);
    box-shadow: var(--okd-select-drop-box-shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    padding: 4px 0
}

.okui-select-option-pc .pc-option-scroll {
    -webkit-overflow-scrolling: touch;
    flex: 1 1;
    overflow: auto
}

.okui-select-option-pc .pc-option-footer {
    border-top: thin solid var(--okd-select-common-border-color);
    padding: 12px 16px
}

.okui-select-option-pc.align-left {
    right: auto
}

.okui-select-option-pc.align-right {
    left: auto
}

.okui-select-option-pc.fixed-height {
    height: auto
}

.okui-select-option-pc.fixed-height .pc-option-scroll {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    height: 276px;
    overflow: hidden
}

.okui-select-option .pc-option-scroll.okui-select-option-pc-fit-to-height {
    height: auto;
    max-height: 292px
}

.okui-select-option-mask {
    z-index: 9800
}

.okui-select .select-popup-reference {
    cursor: pointer;
    position: absolute
}

.okui-select-option-dialog-container>.okui-select-footer-dialog {
    padding: 16px
}

.okui-select-value {
    box-sizing: border-box;
    cursor: pointer;
    font-size: var(--okd-select-md-text-font-size)
}

.okui-select-value-box {
    outline: none
}

.okui-select-value .value {
    align-items: center;
    color: var(--okd-select-common-text-color);
    display: flex;
    margin-right: 8px;
    width: 100%
}

.okui-select-value .placeholder {
    color: var(--okd-input-default-placeholder-color)
}

.okui-select-value .disabled {
    cursor: not-allowed
}

.okui-select-value .disabled .value {
    color: var(--okd-input-disabled-text-color)
}

.okui-select-value .disabled .icon-sign {
    color: var(--okd-select-input-select-default-icon-color);
    color: var(--okd-select-input-select-disabled-icon-color, var(--okd-select-input-select-default-icon-color))
}

.okui-select-value .icon-sign {
    color: var(--okd-select-input-select-default-icon-color);
    font-size: var(--okd-select-input-select-default-icon-size);
    margin-left: auto;
    margin-right: 4px;
    transition: transform .2s linear
}

.okui-select-inner-box {
    cursor: pointer;
    position: relative
}

.okui-select-inner-box input[readonly] {
    cursor: pointer
}

.okui-select-inner-box>.reference-suffix {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%)
}

.okui-select-tag-container {
    display: flex;
    flex-wrap: wrap;
    margin-right: 4px;
    margin-top: 4px;
    max-width: 100%;
    padding-right: 24px
}

.okui-select-tag-container-responsive {
    display: flex;
    margin-right: 24px;
    margin-top: 4px;
    width: 100%
}

.okui-input-sm .okui-select-inner-box>.reference-suffix {
    right: var(--okd-input-sm-padding-horizontal)
}

.okui-input-sm.okui-select-value {
    font-size: var(--okd-select-sm-text-font-size)
}

.okui-input-md .okui-select-inner-box>.reference-suffix {
    right: var(--okd-input-md-padding-horizontal)
}

.okui-input-md.okui-select-value {
    font-size: var(--okd-select-md-text-font-size)
}

.okui-input-xs .okui-select-inner-box>.reference-suffix {
    right: var(--okd-input-xs-padding-horizontal)
}

.okui-input-xs.okui-select-value {
    font-size: var(--okd-select-xs-text-font-size)
}

.okui-input-lg .okui-select-inner-box>.reference-suffix {
    right: var(--okd-input-lg-padding-horizontal)
}

.okui-input-lg.okui-select-value {
    font-size: var(--okd-select-lg-text-font-size);
    font-size: var(--okd-select-lg-text-font-size, var(--okd-select-lg-text-font-size))
}

.okui-input-xl .okui-select-inner-box>.reference-suffix {
    right: var(--okd-input-xl-padding-horizontal)
}

.okui-input-xl.okui-select-value {
    font-size: var(--okd-select-md-text-font-size);
    font-size: var(--okd-select-xl-text-font-size, var(--okd-select-md-text-font-size))
}

.okui-select-value {
    width: 100%
}

.okui-select-text-value {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    font-size: var(--okd-select-md-text-font-size);
    justify-content: flex-start
}

.okui-select-text-value.align-right {
    justify-content: flex-end
}

.okui-select-text-value .value {
    align-items: center;
    color: var(--okd-select-text-select-default-font-color);
    display: flex
}

.okui-select-text-value .icon-sign {
    align-items: center;
    color: var(--okd-select-text-select-default-icon-color);
    display: flex;
    font-size: var(--okd-select-text-select-default-icon-size);
    margin-left: 6px;
    margin-right: 0
}

.okui-select-text-value:hover .value {
    color: var(--okd-select-text-select-hover-font-color)
}

.okui-select-text-value:hover .icon-sign {
    color: var(--okd-select-text-select-hover-icon-color)
}

.okui-select-text-value.focus .value {
    color: var(--okd-select-text-select-select-font-color)
}

.okui-select-text-value.focus .icon-sign {
    color: var(--okd-select-text-select-select-icon-color)
}

.okui-select-text-value.disabled {
    cursor: not-allowed
}

.okui-select-text-value.disabled .value {
    color: var(--okd-select-text-select-disabled-font-color)
}

.okui-select-text-value.disabled .icon-sign {
    color: var(--okd-select-text-select-disabled-icon-color)
}

.input-sm.okui-select-text-value {
    font-size: var(--okd-select-sm-text-font-size)
}

.input-md.okui-select-text-value {
    font-size: var(--okd-select-md-text-font-size)
}

.input-xs.okui-select-text-value {
    font-size: var(--okd-select-xs-text-font-size)
}

.input-lg.okui-select-text-value {
    font-size: var(--okd-select-lg-text-font-size);
    font-size: var(--okd-select-lg-text-font-size, var(--okd-select-lg-text-font-size))
}

.input-xl.okui-select-text-value {
    font-size: var(--okd-select-md-text-font-size);
    font-size: var(--okd-select-xl-text-font-size, var(--okd-select-md-text-font-size))
}

.okui-select-value-box:focus-visible .okui-select-a11y-ring {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-select-value-box:focus-visible .okui-select-a11y-ring-text {
    border-radius: 4px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-select-value-box.display-area:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-select .select-up {
    transition: transform .2s linear
}

.okui-select .select-up-active {
    transform: rotate(180deg)
}

.okui-select-reference-icon-clear {
    color: #929292;
    color: var(--okd-select-reference-icon-default-color, #929292);
    display: inline-block;
    margin-right: 4px;
    transition: transform .2s linear
}

.okui-select-reference-icon-clear:hover {
    color: #000;
    color: var(--okd-select-reference-icon-hover-color, #000)
}

.okui-select-reference-icon-clear.disabled {
    pointer-events: none
}

.okui-select-reference-icon {
    display: inline-block
}

.okui-select-reference-icon.okui-select-arrow-icon-sm {
    font-size: 14px;
    font-size: var(--okd-select-sm-arrow-icon-font-size, 14px)
}

.okui-select-reference-icon.okui-select-reference-icon-sm {
    font-size: 14px;
    font-size: var(--okd-select-sm-reference-icon-font-size, 14px)
}

.okui-select-reference-icon.okui-select-arrow-icon-md {
    font-size: 16px;
    font-size: var(--okd-select-md-arrow-icon-font-size, 16px)
}

.okui-select-reference-icon.okui-select-reference-icon-md {
    font-size: 16px;
    font-size: var(--okd-select-md-reference-icon-font-size, 16px)
}

.okui-select-reference-icon.okui-select-arrow-icon-xs {
    font-size: 14px;
    font-size: var(--okd-select-xs-arrow-icon-font-size, 14px)
}

.okui-select-reference-icon.okui-select-reference-icon-xs {
    font-size: 14px;
    font-size: var(--okd-select-xs-reference-icon-font-size, 14px)
}

.okui-select-reference-icon.okui-select-arrow-icon-lg {
    font-size: 16px;
    font-size: var(--okd-select-lg-arrow-icon-font-size, 16px)
}

.okui-select-reference-icon.okui-select-reference-icon-lg {
    font-size: 16px;
    font-size: var(--okd-select-lg-reference-icon-font-size, 16px)
}

.okui-select-reference-icon.okui-select-arrow-icon-xl {
    font-size: 16px;
    font-size: var(--okd-select-xl-arrow-icon-font-size, 16px)
}

.okui-select-reference-icon.okui-select-reference-icon-xl {
    font-size: 16px;
    font-size: var(--okd-select-xl-reference-icon-font-size, 16px)
}

.okui-select {
    box-sizing: border-box;
    position: relative
}

.okui-select.select-text {
    display: inline-block
}

.okui-dropzone-patch-item {
    align-items: center;
    background: #f9f9f9;
    background: var(--okd-upload-patch-item-background, #f9f9f9);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-top: 8px;
    padding: 8px
}

.okui-dropzone-patch-item-block {
    display: flex
}

.okui-dropzone-patch-item-img {
    cursor: pointer;
    height: 36px;
    margin-right: 12px;
    width: 36px
}

.okui-dropzone-patch-item-img .placeholder-icon {
    color: #dbdbdb;
    color: var(--okd-upload-patch-item-placeholder-icon-color, #dbdbdb);
    font-size: 36px
}

.okui-dropzone-patch-item-content {
    display: flex;
    flex-direction: column
}

.okui-dropzone-patch-item-title {
    color: #3d3d3d;
    color: var(--okd-upload-patch-item-title-color, #3d3d3d);
    font-size: 14px;
    line-height: 16px
}

.okui-dropzone-patch-item-desc {
    align-items: center;
    color: #929292;
    color: var(--okd-upload-patch-item-desc-color, #929292);
    display: flex;
    font-size: 12px;
    margin-top: 4px
}

.okui-dropzone-patch-item-gap {
    margin-right: 4px
}

.okui-dropzone-patch-item-loader {
    height: 16px;
    width: 16px
}

.okui-dropzone-patch-item-icon-success {
    color: #05c28c;
    color: var(--okd-upload-patch-item-success-icon-color, #05c28c);
    font-size: 12px
}

.okui-dropzone-patch-item-icon-error {
    color: #e3493f;
    color: var(--okd-upload-patch-item-error-icon-color, #e3493f);
    font-size: 12px
}

.okui-dropzone-patch-item-error-text {
    color: #e3493f;
    color: var(--okd-upload-patch-item-error-text-color, #e3493f)
}

.okui-dropzone-patch-item-retry {
    color: #0569ff;
    color: var(--okd-upload-patch-item-retry-text-color, #0569ff);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px
}

.okui-dropzone-patch-item .remove-icon {
    color: #bdbdbd;
    color: var(--okd-upload-patch-item-remove-icon-color, #bdbdbd);
    cursor: pointer;
    font-size: 20px
}

.okui-dropzone-patch-item-dot {
    background-color: #929292;
    background-color: var(--okd-upload-patch-item-desc-color, #929292);
    border-radius: 50%;
    height: 3px;
    margin: 0 6px;
    width: 3px
}

.okui-tabs-pane.okui-tabs-pane-outline-highlight {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-outline-highlight-default-background-color, transparent);
    border-color: #dbdbdb;
    border-color: var(--okd-tabs-pane-outline-highlight-default-border-color, #dbdbdb);
    border-style: solid;
    color: #929292;
    color: var(--okd-tabs-pane-outline-highlight-default-text-color, #929292)
}

.okui-tabs-pane.okui-tabs-pane-outline-highlight.okui-tabs-active {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-outline-highlight-active-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-outline-highlight-active-border-color, #000);
    color: #000;
    color: var(--okd-tabs-pane-outline-highlight-active-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-outline-highlight.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #000;
    outline-color: var(--okd-tabs-pane-outline-highlight-active-text-color, #000);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-outline-highlight:hover:not(.okui-tabs-active) {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-outline-highlight-hover-background-color, transparent);
    border-color: #dbdbdb;
    border-color: var(--okd-tabs-pane-outline-highlight-hover-border-color, #dbdbdb);
    color: #000;
    color: var(--okd-tabs-pane-outline-highlight-hover-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-outline-primary {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-outline-primary-default-background-color, transparent);
    border-color: transparent;
    border-color: var(--okd-tabs-pane-outline-primary-default-border-color, transparent);
    border-style: solid;
    color: #929292;
    color: var(--okd-tabs-pane-outline-primary-default-text-color, #929292)
}

.okui-tabs-pane.okui-tabs-pane-outline-primary.okui-tabs-active {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-outline-primary-active-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-outline-primary-active-border-color, #000);
    color: #000;
    color: var(--okd-tabs-pane-outline-primary-active-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-outline-primary.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #000;
    outline-color: var(--okd-tabs-pane-outline-primary-active-text-color, #000);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-outline-primary:hover:not(.okui-tabs-active) {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-outline-primary-hover-background-color, transparent);
    border-color: transparent;
    border-color: var(--okd-tabs-pane-outline-primary-hover-border-color, transparent);
    color: #000;
    color: var(--okd-tabs-pane-outline-primary-hover-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-outline-secondary {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-outline-secondary-default-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-outline-secondary-default-border-color, #000);
    border-style: solid;
    color: #fff;
    color: var(--okd-tabs-pane-outline-secondary-default-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-outline-secondary.okui-tabs-active {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-outline-secondary-active-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-outline-secondary-active-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-outline-secondary-active-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-outline-secondary.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-outline-secondary-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-outline-secondary:hover:not(.okui-tabs-active) {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-outline-secondary-hover-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-outline-secondary-hover-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-outline-secondary-hover-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-outline-reversed {
    background-color: #f7f7f7;
    background-color: var(--okd-tabs-pane-outline-reversed-default-background-color, #f7f7f7);
    border-color: #f7f7f7;
    border-color: var(--okd-tabs-pane-outline-reversed-default-border-color, #f7f7f7);
    border-style: solid;
    color: #3d3d3d;
    color: var(--okd-tabs-pane-outline-reversed-default-text-color, #3d3d3d)
}

.okui-tabs-pane.okui-tabs-pane-outline-reversed:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-outline-reversed-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-outline-reversed.okui-tabs-active {
    background-color: #000;
    background-color: var(--okd-tabs-pane-outline-reversed-active-background-color, #000);
    border-color: #000;
    border-color: var(--okd-tabs-pane-outline-reversed-active-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-outline-reversed-active-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-outline-reversed.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-outline-reversed-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-outline-reversed:hover:not(.okui-tabs-active) {
    background-color: #ebebeb;
    background-color: var(--okd-tabs-pane-outline-reversed-hover-background-color, #ebebeb);
    border-color: #ebebeb;
    border-color: var(--okd-tabs-pane-outline-reversed-hover-border-color, #ebebeb);
    color: #3d3d3d;
    color: var(--okd-tabs-pane-outline-reversed-hover-text-color, #3d3d3d)
}

.okui-tabs-pane.okui-tabs-pane-fill-highlight {
    background-color: #f7f7f7;
    background-color: var(--okd-tabs-pane-fill-highlight-default-background-color, #f7f7f7);
    border-color: #f7f7f7;
    border-color: var(--okd-tabs-pane-fill-highlight-default-border-color, #f7f7f7);
    border-style: solid;
    color: #3d3d3d;
    color: var(--okd-tabs-pane-fill-highlight-default-text-color, #3d3d3d)
}

.okui-tabs-pane.okui-tabs-pane-fill-highlight.okui-tabs-active {
    background-color: #000;
    background-color: var(--okd-tabs-pane-fill-highlight-active-background-color, #000);
    border-color: #000;
    border-color: var(--okd-tabs-pane-fill-highlight-active-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-fill-highlight-active-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-fill-highlight.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-fill-highlight-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-fill-highlight:hover:not(.okui-tabs-active) {
    background-color: #ebebeb;
    background-color: var(--okd-tabs-pane-fill-highlight-hover-background-color, #ebebeb);
    border-color: #ebebeb;
    border-color: var(--okd-tabs-pane-fill-highlight-hover-border-color, #ebebeb);
    color: #3d3d3d;
    color: var(--okd-tabs-pane-fill-highlight-hover-text-color, #3d3d3d)
}

.okui-tabs-pane.okui-tabs-pane-fill-primary {
    background-color: #f7f7f7;
    background-color: var(--okd-tabs-pane-fill-primary-default-background-color, #f7f7f7);
    border-color: #f7f7f7;
    border-color: var(--okd-tabs-pane-fill-primary-default-border-color, #f7f7f7);
    border-style: solid;
    color: #929292;
    color: var(--okd-tabs-pane-fill-primary-default-text-color, #929292)
}

.okui-tabs-pane.okui-tabs-pane-fill-primary.okui-tabs-active {
    background-color: #f7f7f7;
    background-color: var(--okd-tabs-pane-fill-primary-active-background-color, #f7f7f7);
    border-color: #f7f7f7;
    border-color: var(--okd-tabs-pane-fill-primary-active-border-color, #f7f7f7);
    color: #000;
    color: var(--okd-tabs-pane-fill-primary-active-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-fill-primary.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #000;
    outline-color: var(--okd-tabs-pane-fill-primary-active-text-color, #000);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-fill-primary:hover:not(.okui-tabs-active) {
    background-color: #ebebeb;
    background-color: var(--okd-tabs-pane-fill-primary-hover-background-color, #ebebeb);
    border-color: #ebebeb;
    border-color: var(--okd-tabs-pane-fill-primary-hover-border-color, #ebebeb);
    color: #000;
    color: var(--okd-tabs-pane-fill-primary-hover-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-fill-secondary {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-fill-secondary-default-background-color, transparent);
    border-color: transparent;
    border-color: var(--okd-tabs-pane-fill-secondary-default-border-color, transparent);
    border-style: solid;
    color: #929292;
    color: var(--okd-tabs-pane-fill-secondary-default-text-color, #929292)
}

.okui-tabs-pane.okui-tabs-pane-fill-secondary.okui-tabs-active {
    background-color: #f7f7f7;
    background-color: var(--okd-tabs-pane-fill-secondary-active-background-color, #f7f7f7);
    border-color: #f7f7f7;
    border-color: var(--okd-tabs-pane-fill-secondary-active-border-color, #f7f7f7);
    color: #000;
    color: var(--okd-tabs-pane-fill-secondary-active-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-fill-secondary.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #000;
    outline-color: var(--okd-tabs-pane-fill-secondary-active-text-color, #000);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-fill-secondary:hover:not(.okui-tabs-active) {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-fill-secondary-hover-background-color, transparent);
    border-color: transparent;
    border-color: var(--okd-tabs-pane-fill-secondary-hover-border-color, transparent);
    color: #000;
    color: var(--okd-tabs-pane-fill-secondary-hover-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-fill-reversed {
    background-color: #f7f7f7;
    background-color: var(--okd-tabs-pane-fill-reversed-default-background-color, #f7f7f7);
    border-color: #f7f7f7;
    border-color: var(--okd-tabs-pane-fill-reversed-default-border-color, #f7f7f7);
    border-style: solid;
    color: #3d3d3d;
    color: var(--okd-tabs-pane-fill-reversed-default-text-color, #3d3d3d)
}

.okui-tabs-pane.okui-tabs-pane-fill-reversed:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-fill-reversed-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-fill-reversed.okui-tabs-active {
    background-color: #000;
    background-color: var(--okd-tabs-pane-fill-reversed-active-background-color, #000);
    border-color: #000;
    border-color: var(--okd-tabs-pane-fill-reversed-active-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-fill-reversed-active-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-fill-reversed.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-fill-reversed-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-fill-reversed:hover:not(.okui-tabs-active) {
    background-color: #ebebeb;
    background-color: var(--okd-tabs-pane-fill-reversed-hover-background-color, #ebebeb);
    border-color: #ebebeb;
    border-color: var(--okd-tabs-pane-fill-reversed-hover-border-color, #ebebeb);
    color: #3d3d3d;
    color: var(--okd-tabs-pane-fill-reversed-hover-text-color, #3d3d3d)
}

.okui-tabs-pane.okui-tabs-pane-text-highlight {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-text-highlight-default-background-color, transparent);
    border-color: transparent;
    border-color: var(--okd-tabs-pane-text-highlight-default-border-color, transparent);
    border-style: solid;
    color: #929292;
    color: var(--okd-tabs-pane-text-highlight-default-text-color, #929292)
}

.okui-tabs-pane.okui-tabs-pane-text-highlight.okui-tabs-active {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-text-highlight-active-background-color, transparent);
    border-color: transparent;
    border-color: var(--okd-tabs-pane-text-highlight-active-border-color, transparent);
    color: #000;
    color: var(--okd-tabs-pane-text-highlight-active-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-text-highlight.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #000;
    outline-color: var(--okd-tabs-pane-text-highlight-active-text-color, #000);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-text-highlight:hover:not(.okui-tabs-active) {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-text-highlight-hover-background-color, transparent);
    border-color: transparent;
    border-color: var(--okd-tabs-pane-text-highlight-hover-border-color, transparent);
    color: #000;
    color: var(--okd-tabs-pane-text-highlight-hover-text-color, #000)
}

.okui-tabs-pane.okui-tabs-pane-text-primary {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-text-primary-default-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-text-primary-default-border-color, #000);
    border-style: solid;
    color: #fff;
    color: var(--okd-tabs-pane-text-primary-default-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-text-primary.okui-tabs-active {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-text-primary-active-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-text-primary-active-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-text-primary-active-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-text-primary.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-text-primary-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-text-primary:hover:not(.okui-tabs-active) {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-text-primary-hover-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-text-primary-hover-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-text-primary-hover-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-text-secondary {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-text-secondary-default-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-text-secondary-default-border-color, #000);
    border-style: solid;
    color: #fff;
    color: var(--okd-tabs-pane-text-secondary-default-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-text-secondary.okui-tabs-active {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-text-secondary-active-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-text-secondary-active-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-text-secondary-active-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-text-secondary.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-text-secondary-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-text-secondary:hover:not(.okui-tabs-active) {
    background-color: transparent;
    background-color: var(--okd-tabs-pane-text-secondary-hover-background-color, transparent);
    border-color: #000;
    border-color: var(--okd-tabs-pane-text-secondary-hover-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-text-secondary-hover-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-text-reversed {
    background-color: #f7f7f7;
    background-color: var(--okd-tabs-pane-text-reversed-default-background-color, #f7f7f7);
    border-color: #f7f7f7;
    border-color: var(--okd-tabs-pane-text-reversed-default-border-color, #f7f7f7);
    border-style: solid;
    color: #3d3d3d;
    color: var(--okd-tabs-pane-text-reversed-default-text-color, #3d3d3d)
}

.okui-tabs-pane.okui-tabs-pane-text-reversed:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-text-reversed-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-text-reversed.okui-tabs-active {
    background-color: #000;
    background-color: var(--okd-tabs-pane-text-reversed-active-background-color, #000);
    border-color: #000;
    border-color: var(--okd-tabs-pane-text-reversed-active-border-color, #000);
    color: #fff;
    color: var(--okd-tabs-pane-text-reversed-active-text-color, #fff)
}

.okui-tabs-pane.okui-tabs-pane-text-reversed.okui-tabs-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: #fff;
    outline-color: var(--okd-tabs-pane-text-reversed-active-text-color, #fff);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane.okui-tabs-pane-text-reversed:hover:not(.okui-tabs-active) {
    background-color: #ebebeb;
    background-color: var(--okd-tabs-pane-text-reversed-hover-background-color, #ebebeb);
    border-color: #ebebeb;
    border-color: var(--okd-tabs-pane-text-reversed-hover-border-color, #ebebeb);
    color: #3d3d3d;
    color: var(--okd-tabs-pane-text-reversed-hover-text-color, #3d3d3d)
}

.okui-tabs-pane-xxs.category-size {
    border-radius: 4px;
    border-radius: var(--okd-tabs-pane-xxs-border-radius, 4px);
    border-width: 1px;
    border-width: var(--okd-tabs-pane-xxs-border-width, 1px);
    font-size: 12px;
    font-size: var(--okd-tabs-pane-xxs-font-size, 12px);
    font-weight: 400;
    font-weight: var(--okd-tabs-pane-xxs-font-weight, 400);
    height: 24px;
    height: var(--okd-tabs-pane-xxs-height, 24px);
    margin-right: 8px;
    margin-right: var(--okd-tabs-pane-xxs-margin-right, 8px);
    padding: 0 8px;
    padding: 0 var(--okd-tabs-pane-xxs-padding-vertical, 8px)
}

.okui-tabs-pane-xxs.category-size:last-child {
    margin-right: 0
}

.okui-tabs-pane-xxs.category-size.okui-tabs-active {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xxs-active-font-weight, 500)
}

.okui-tabs-pane-xxs.category-size:hover:not(.okui-tabs-active) {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xxs-hover-font-weight, 500)
}

.okui-tabs-pane-xxs.category-size.okui-tabs-pane-circle {
    border-radius: 12px;
    border-radius: calc(var(--okd-tabs-pane-xxs-height, 24px)/2)
}

.okui-tabs-pane-xs.category-size {
    border-radius: 4px;
    border-radius: var(--okd-tabs-pane-xs-border-radius, 4px);
    border-width: 1px;
    border-width: var(--okd-tabs-pane-xs-border-width, 1px);
    font-size: 12px;
    font-size: var(--okd-tabs-pane-xs-font-size, 12px);
    font-weight: 400;
    font-weight: var(--okd-tabs-pane-xs-font-weight, 400);
    height: 24px;
    height: var(--okd-tabs-pane-xs-height, 24px);
    margin-right: 8px;
    margin-right: var(--okd-tabs-pane-xs-margin-right, 8px);
    padding: 0 8px;
    padding: 0 var(--okd-tabs-pane-xs-padding-vertical, 8px)
}

.okui-tabs-pane-xs.category-size:last-child {
    margin-right: 0
}

.okui-tabs-pane-xs.category-size.okui-tabs-active {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xs-active-font-weight, 500)
}

.okui-tabs-pane-xs.category-size:hover:not(.okui-tabs-active) {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xs-hover-font-weight, 500)
}

.okui-tabs-pane-xs.category-size.okui-tabs-pane-circle {
    border-radius: 12px;
    border-radius: calc(var(--okd-tabs-pane-xs-height, 24px)/2)
}

.okui-tabs-pane-sm.category-size {
    border-radius: 4px;
    border-radius: var(--okd-tabs-pane-sm-border-radius, 4px);
    border-width: 1px;
    border-width: var(--okd-tabs-pane-sm-border-width, 1px);
    font-size: 12px;
    font-size: var(--okd-tabs-pane-sm-font-size, 12px);
    font-weight: 400;
    font-weight: var(--okd-tabs-pane-sm-font-weight, 400);
    height: 28px;
    height: var(--okd-tabs-pane-sm-height, 28px);
    margin-right: 8px;
    margin-right: var(--okd-tabs-pane-sm-margin-right, 8px);
    padding: 0 8px;
    padding: 0 var(--okd-tabs-pane-sm-padding-vertical, 8px)
}

.okui-tabs-pane-sm.category-size:last-child {
    margin-right: 0
}

.okui-tabs-pane-sm.category-size.okui-tabs-active {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-sm-active-font-weight, 500)
}

.okui-tabs-pane-sm.category-size:hover:not(.okui-tabs-active) {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-sm-hover-font-weight, 500)
}

.okui-tabs-pane-sm.category-size.okui-tabs-pane-circle {
    border-radius: 14px;
    border-radius: calc(var(--okd-tabs-pane-sm-height, 28px)/2)
}

.okui-tabs-pane-md.category-size {
    border-radius: 6px;
    border-radius: var(--okd-tabs-pane-md-border-radius, 6px);
    border-width: 1px;
    border-width: var(--okd-tabs-pane-md-border-width, 1px);
    font-size: 14px;
    font-size: var(--okd-tabs-pane-md-font-size, 14px);
    font-weight: 400;
    font-weight: var(--okd-tabs-pane-md-font-weight, 400);
    height: 32px;
    height: var(--okd-tabs-pane-md-height, 32px);
    margin-right: 8px;
    margin-right: var(--okd-tabs-pane-md-margin-right, 8px);
    padding: 0 8px;
    padding: 0 var(--okd-tabs-pane-md-padding-vertical, 8px)
}

.okui-tabs-pane-md.category-size:last-child {
    margin-right: 0
}

.okui-tabs-pane-md.category-size.okui-tabs-active {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-md-active-font-weight, 500)
}

.okui-tabs-pane-md.category-size:hover:not(.okui-tabs-active) {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-md-hover-font-weight, 500)
}

.okui-tabs-pane-md.category-size.okui-tabs-pane-circle {
    border-radius: 16px;
    border-radius: calc(var(--okd-tabs-pane-md-height, 32px)/2)
}

.okui-tabs-pane-lg.category-size {
    border-radius: 6px;
    border-radius: var(--okd-tabs-pane-lg-border-radius, 6px);
    border-width: 1px;
    border-width: var(--okd-tabs-pane-lg-border-width, 1px);
    font-size: 14px;
    font-size: var(--okd-tabs-pane-lg-font-size, 14px);
    font-weight: 400;
    font-weight: var(--okd-tabs-pane-lg-font-weight, 400);
    height: 36px;
    height: var(--okd-tabs-pane-lg-height, 36px);
    margin-right: 8px;
    margin-right: var(--okd-tabs-pane-lg-margin-right, 8px);
    padding: 0 12px;
    padding: 0 var(--okd-tabs-pane-lg-padding-vertical, 12px)
}

.okui-tabs-pane-lg.category-size:last-child {
    margin-right: 0
}

.okui-tabs-pane-lg.category-size.okui-tabs-active {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-lg-active-font-weight, 500)
}

.okui-tabs-pane-lg.category-size:hover:not(.okui-tabs-active) {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-lg-hover-font-weight, 500)
}

.okui-tabs-pane-lg.category-size.okui-tabs-pane-circle {
    border-radius: 18px;
    border-radius: calc(var(--okd-tabs-pane-lg-height, 36px)/2)
}

.okui-tabs-pane-xl.category-size {
    border-radius: 8px;
    border-radius: var(--okd-tabs-pane-xl-border-radius, 8px);
    border-width: 1px;
    border-width: var(--okd-tabs-pane-xl-border-width, 1px);
    font-size: 14px;
    font-size: var(--okd-tabs-pane-xl-font-size, 14px);
    font-weight: 400;
    font-weight: var(--okd-tabs-pane-xl-font-weight, 400);
    height: 40px;
    height: var(--okd-tabs-pane-xl-height, 40px);
    margin-right: 8px;
    margin-right: var(--okd-tabs-pane-xl-margin-right, 8px);
    padding: 0 16px;
    padding: 0 var(--okd-tabs-pane-xl-padding-vertical, 16px)
}

.okui-tabs-pane-xl.category-size:last-child {
    margin-right: 0
}

.okui-tabs-pane-xl.category-size.okui-tabs-active {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xl-active-font-weight, 500)
}

.okui-tabs-pane-xl.category-size:hover:not(.okui-tabs-active) {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xl-hover-font-weight, 500)
}

.okui-tabs-pane-xl.category-size.okui-tabs-pane-circle {
    border-radius: 20px;
    border-radius: calc(var(--okd-tabs-pane-xl-height, 40px)/2)
}

.okui-tabs-pane-xxl.category-size {
    border-radius: 8px;
    border-radius: var(--okd-tabs-pane-xxl-border-radius, 8px);
    border-width: 1px;
    border-width: var(--okd-tabs-pane-xxl-border-width, 1px);
    font-size: 16px;
    font-size: var(--okd-tabs-pane-xxl-font-size, 16px);
    font-weight: 400;
    font-weight: var(--okd-tabs-pane-xxl-font-weight, 400);
    height: 44px;
    height: var(--okd-tabs-pane-xxl-height, 44px);
    margin-right: 8px;
    margin-right: var(--okd-tabs-pane-xxl-margin-right, 8px);
    padding: 0 16px;
    padding: 0 var(--okd-tabs-pane-xxl-padding-vertical, 16px)
}

.okui-tabs-pane-xxl.category-size:last-child {
    margin-right: 0
}

.okui-tabs-pane-xxl.category-size.okui-tabs-active {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xxl-active-font-weight, 500)
}

.okui-tabs-pane-xxl.category-size:hover:not(.okui-tabs-active) {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xxl-hover-font-weight, 500)
}

.okui-tabs-pane-xxl.category-size.okui-tabs-pane-circle {
    border-radius: 22px;
    border-radius: calc(var(--okd-tabs-pane-xxl-height, 44px)/2)
}

.okui-tabs-pane-xxxl.category-size {
    border-radius: 10px;
    border-radius: var(--okd-tabs-pane-xxxl-border-radius, 10px);
    border-width: 1px;
    border-width: var(--okd-tabs-pane-xxxl-border-width, 1px);
    font-size: 18px;
    font-size: var(--okd-tabs-pane-xxxl-font-size, 18px);
    font-weight: 400;
    font-weight: var(--okd-tabs-pane-xxxl-font-weight, 400);
    height: 50px;
    height: var(--okd-tabs-pane-xxxl-height, 50px);
    margin-right: 8px;
    margin-right: var(--okd-tabs-pane-xxxl-margin-right, 8px);
    padding: 0 16px;
    padding: 0 var(--okd-tabs-pane-xxxl-padding-vertical, 16px)
}

.okui-tabs-pane-xxxl.category-size:last-child {
    margin-right: 0
}

.okui-tabs-pane-xxxl.category-size.okui-tabs-active {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xxxl-active-font-weight, 500)
}

.okui-tabs-pane-xxxl.category-size:hover:not(.okui-tabs-active) {
    font-weight: 500;
    font-weight: var(--okd-tabs-pane-xxxl-hover-font-weight, 500)
}

.okui-tabs-pane-xxxl.category-size.okui-tabs-pane-circle {
    border-radius: 25px;
    border-radius: calc(var(--okd-tabs-pane-xxxl-height, 50px)/2)
}

.okui-tabs-pane-xxs:last-child {
    margin-right: 0 !important
}

.okui-tabs-pane-xxs.okui-tabs-pane-underline {
    font-size: var(--okd-tabs-xxs-underline-font-size);
    font-weight: 400;
    font-weight: var(--okd-tabs-xxs-underline-font-weight, 400);
    margin-right: var(--okd-tabs-xxs-underline-spacing);
    padding: 0 var(--okd-tabs-xxs-underline-label-padding)
}

.okui-tabs-pane-xxs.okui-tabs-pane-underline.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxs-underline-height)/2)
}

.okui-tabs-pane-xxs.okui-tabs-pane-underline-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxs-underline-active-font-weight, 400)
}

.okui-tabs-pane-xxs.okui-tabs-pane-button {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxs-button-border-radius, 4px);
    font-size: var(--okd-tabs-xxs-button-font-size);
    font-weight: var(--okd-tabs-xxs-button-font-weight);
    margin-right: var(--okd-tabs-xxs-button-spacing);
    padding: 0 var(--okd-tabs-xxs-button-label-padding)
}

.okui-tabs-pane-xxs.okui-tabs-pane-button.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxs-button-height)/2)
}

.okui-tabs-pane-xxs.okui-tabs-pane-button-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxs-button-active-font-weight, 400)
}

.okui-tabs-pane-xxs.okui-tabs-pane-muted {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxs-muted-border-radius, 4px);
    font-size: var(--okd-tabs-xxs-muted-font-size);
    font-weight: var(--okd-tabs-xxs-muted-font-weight);
    margin-right: var(--okd-tabs-xxs-muted-spacing);
    padding: 0 var(--okd-tabs-xxs-muted-label-padding)
}

.okui-tabs-pane-xxs.okui-tabs-pane-muted.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxs-muted-height)/2)
}

.okui-tabs-pane-xxs.okui-tabs-pane-muted-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxs-muted-active-font-weight, 400)
}

.okui-tabs-pane-xxs.okui-tabs-pane-segmented {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxs-segmented-border-radius, 4px);
    font-size: var(--okd-tabs-xxs-segmented-font-size);
    font-weight: var(--okd-tabs-xxs-segmented-font-weight);
    margin-right: var(--okd-tabs-xxs-segmented-spacing);
    padding: 0 var(--okd-tabs-xxs-segmented-label-padding)
}

.okui-tabs-pane-xxs.okui-tabs-pane-segmented-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxs-segmented-active-font-weight, 400)
}

.okui-tabs-pane-xxs.okui-tabs-pane-segmented.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxs-segmented-height)/2)
}

.okui-tabs-pane-list-xxs .okui-tabs-pane-list-nav-icon .icon {
    font-size: var(--okd-tabs-xxs-common-icon-size)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-underline {
    font-size: var(--okd-tabs-xxs-underline-font-size);
    height: var(--okd-tabs-xxs-underline-height)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-underline .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxs-underline-height)/2)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-button {
    font-size: var(--okd-tabs-xxs-button-font-size);
    height: var(--okd-tabs-xxs-button-height);
    line-height: var(--okd-tabs-xxs-button-height)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-button .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxs-button-container-border-radius, 4px)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-button .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxs-button-height)/2)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-muted {
    font-size: var(--okd-tabs-xxs-muted-font-size);
    height: var(--okd-tabs-xxs-muted-height);
    line-height: var(--okd-tabs-xxs-muted-height)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-muted .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxs-muted-container-border-radius, 4px)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-muted .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxs-muted-height)/2)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-segmented {
    font-size: var(--okd-tabs-xxs-segmented-font-size);
    height: var(--okd-tabs-xxs-segmented-height);
    line-height: var(--okd-tabs-xxs-segmented-height)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-segmented .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxs-segmented-container-border-radius, 4px)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-segmented .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxs-segmented-height)/2)
}

.okui-tabs-pane-list-xxs.okui-tabs-pane-list-segmented .okui-tabs-pane-list-flex {
    padding: var(--okd-tabs-xxs-segmented-container-padding)
}

.okui-tabs-pane-xs:last-child {
    margin-right: 0 !important
}

.okui-tabs-pane-xs.okui-tabs-pane-underline {
    font-size: var(--okd-tabs-xs-underline-font-size);
    font-weight: 400;
    font-weight: var(--okd-tabs-xs-underline-font-weight, 400);
    margin-right: var(--okd-tabs-xs-underline-spacing);
    padding: 0 var(--okd-tabs-xs-underline-label-padding)
}

.okui-tabs-pane-xs.okui-tabs-pane-underline.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xs-underline-height)/2)
}

.okui-tabs-pane-xs.okui-tabs-pane-underline-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xs-underline-active-font-weight, 400)
}

.okui-tabs-pane-xs.okui-tabs-pane-button {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xs-button-border-radius, 4px);
    font-size: var(--okd-tabs-xs-button-font-size);
    font-weight: var(--okd-tabs-xs-button-font-weight);
    margin-right: var(--okd-tabs-xs-button-spacing);
    padding: 0 var(--okd-tabs-xs-button-label-padding)
}

.okui-tabs-pane-xs.okui-tabs-pane-button.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xs-button-height)/2)
}

.okui-tabs-pane-xs.okui-tabs-pane-button-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xs-button-active-font-weight, 400)
}

.okui-tabs-pane-xs.okui-tabs-pane-muted {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xs-muted-border-radius, 4px);
    font-size: var(--okd-tabs-xs-muted-font-size);
    font-weight: var(--okd-tabs-xs-muted-font-weight);
    margin-right: var(--okd-tabs-xs-muted-spacing);
    padding: 0 var(--okd-tabs-xs-muted-label-padding)
}

.okui-tabs-pane-xs.okui-tabs-pane-muted.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xs-muted-height)/2)
}

.okui-tabs-pane-xs.okui-tabs-pane-muted-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xs-muted-active-font-weight, 400)
}

.okui-tabs-pane-xs.okui-tabs-pane-segmented {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xs-segmented-border-radius, 4px);
    font-size: var(--okd-tabs-xs-segmented-font-size);
    font-weight: var(--okd-tabs-xs-segmented-font-weight);
    margin-right: var(--okd-tabs-xs-segmented-spacing);
    padding: 0 var(--okd-tabs-xs-segmented-label-padding)
}

.okui-tabs-pane-xs.okui-tabs-pane-segmented-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xs-segmented-active-font-weight, 400)
}

.okui-tabs-pane-xs.okui-tabs-pane-segmented.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xs-segmented-height)/2)
}

.okui-tabs-pane-list-xs .okui-tabs-pane-list-nav-icon .icon {
    font-size: var(--okd-tabs-xs-common-icon-size)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-underline {
    font-size: var(--okd-tabs-xs-underline-font-size);
    height: var(--okd-tabs-xs-underline-height)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-underline .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xs-underline-height)/2)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-button {
    font-size: var(--okd-tabs-xs-button-font-size);
    height: var(--okd-tabs-xs-button-height);
    line-height: var(--okd-tabs-xs-button-height)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-button .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xs-button-container-border-radius, 4px)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-button .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xs-button-height)/2)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-muted {
    font-size: var(--okd-tabs-xs-muted-font-size);
    height: var(--okd-tabs-xs-muted-height);
    line-height: var(--okd-tabs-xs-muted-height)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-muted .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xs-muted-container-border-radius, 4px)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-muted .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xs-muted-height)/2)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-segmented {
    font-size: var(--okd-tabs-xs-segmented-font-size);
    height: var(--okd-tabs-xs-segmented-height);
    line-height: var(--okd-tabs-xs-segmented-height)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-segmented .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xs-segmented-container-border-radius, 4px)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-segmented .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xs-segmented-height)/2)
}

.okui-tabs-pane-list-xs.okui-tabs-pane-list-segmented .okui-tabs-pane-list-flex {
    padding: var(--okd-tabs-xs-segmented-container-padding)
}

.okui-tabs-pane-sm:last-child {
    margin-right: 0 !important
}

.okui-tabs-pane-sm.okui-tabs-pane-underline {
    font-size: var(--okd-tabs-sm-underline-font-size);
    font-weight: 400;
    font-weight: var(--okd-tabs-sm-underline-font-weight, 400);
    margin-right: var(--okd-tabs-sm-underline-spacing);
    padding: 0 var(--okd-tabs-sm-underline-label-padding)
}

.okui-tabs-pane-sm.okui-tabs-pane-underline.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-sm-underline-height)/2)
}

.okui-tabs-pane-sm.okui-tabs-pane-underline-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-sm-underline-active-font-weight, 400)
}

.okui-tabs-pane-sm.okui-tabs-pane-button {
    border-radius: 4px;
    border-radius: var(--okd-tabs-sm-button-border-radius, 4px);
    font-size: var(--okd-tabs-sm-button-font-size);
    font-weight: var(--okd-tabs-sm-button-font-weight);
    margin-right: var(--okd-tabs-sm-button-spacing);
    padding: 0 var(--okd-tabs-sm-button-label-padding)
}

.okui-tabs-pane-sm.okui-tabs-pane-button.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-sm-button-height)/2)
}

.okui-tabs-pane-sm.okui-tabs-pane-button-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-sm-button-active-font-weight, 400)
}

.okui-tabs-pane-sm.okui-tabs-pane-muted {
    border-radius: 4px;
    border-radius: var(--okd-tabs-sm-muted-border-radius, 4px);
    font-size: var(--okd-tabs-sm-muted-font-size);
    font-weight: var(--okd-tabs-sm-muted-font-weight);
    margin-right: var(--okd-tabs-sm-muted-spacing);
    padding: 0 var(--okd-tabs-sm-muted-label-padding)
}

.okui-tabs-pane-sm.okui-tabs-pane-muted.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-sm-muted-height)/2)
}

.okui-tabs-pane-sm.okui-tabs-pane-muted-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-sm-muted-active-font-weight, 400)
}

.okui-tabs-pane-sm.okui-tabs-pane-segmented {
    border-radius: 4px;
    border-radius: var(--okd-tabs-sm-segmented-border-radius, 4px);
    font-size: var(--okd-tabs-sm-segmented-font-size);
    font-weight: var(--okd-tabs-sm-segmented-font-weight);
    margin-right: var(--okd-tabs-sm-segmented-spacing);
    padding: 0 var(--okd-tabs-sm-segmented-label-padding)
}

.okui-tabs-pane-sm.okui-tabs-pane-segmented-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-sm-segmented-active-font-weight, 400)
}

.okui-tabs-pane-sm.okui-tabs-pane-segmented.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-sm-segmented-height)/2)
}

.okui-tabs-pane-list-sm .okui-tabs-pane-list-nav-icon .icon {
    font-size: var(--okd-tabs-sm-common-icon-size)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-underline {
    font-size: var(--okd-tabs-sm-underline-font-size);
    height: var(--okd-tabs-sm-underline-height)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-underline .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-sm-underline-height)/2)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-button {
    font-size: var(--okd-tabs-sm-button-font-size);
    height: var(--okd-tabs-sm-button-height);
    line-height: var(--okd-tabs-sm-button-height)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-button .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-sm-button-container-border-radius, 4px)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-button .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-sm-button-height)/2)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-muted {
    font-size: var(--okd-tabs-sm-muted-font-size);
    height: var(--okd-tabs-sm-muted-height);
    line-height: var(--okd-tabs-sm-muted-height)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-muted .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-sm-muted-container-border-radius, 4px)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-muted .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-sm-muted-height)/2)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-segmented {
    font-size: var(--okd-tabs-sm-segmented-font-size);
    height: var(--okd-tabs-sm-segmented-height);
    line-height: var(--okd-tabs-sm-segmented-height)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-segmented .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-sm-segmented-container-border-radius, 4px)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-segmented .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-sm-segmented-height)/2)
}

.okui-tabs-pane-list-sm.okui-tabs-pane-list-segmented .okui-tabs-pane-list-flex {
    padding: var(--okd-tabs-sm-segmented-container-padding)
}

.okui-tabs-pane-md:last-child {
    margin-right: 0 !important
}

.okui-tabs-pane-md.okui-tabs-pane-underline {
    font-size: var(--okd-tabs-md-underline-font-size);
    font-weight: 400;
    font-weight: var(--okd-tabs-md-underline-font-weight, 400);
    margin-right: var(--okd-tabs-md-underline-spacing);
    padding: 0 var(--okd-tabs-md-underline-label-padding)
}

.okui-tabs-pane-md.okui-tabs-pane-underline.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-md-underline-height)/2)
}

.okui-tabs-pane-md.okui-tabs-pane-underline-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-md-underline-active-font-weight, 400)
}

.okui-tabs-pane-md.okui-tabs-pane-button {
    border-radius: 4px;
    border-radius: var(--okd-tabs-md-button-border-radius, 4px);
    font-size: var(--okd-tabs-md-button-font-size);
    font-weight: var(--okd-tabs-md-button-font-weight);
    margin-right: var(--okd-tabs-md-button-spacing);
    padding: 0 var(--okd-tabs-md-button-label-padding)
}

.okui-tabs-pane-md.okui-tabs-pane-button.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-md-button-height)/2)
}

.okui-tabs-pane-md.okui-tabs-pane-button-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-md-button-active-font-weight, 400)
}

.okui-tabs-pane-md.okui-tabs-pane-muted {
    border-radius: 4px;
    border-radius: var(--okd-tabs-md-muted-border-radius, 4px);
    font-size: var(--okd-tabs-md-muted-font-size);
    font-weight: var(--okd-tabs-md-muted-font-weight);
    margin-right: var(--okd-tabs-md-muted-spacing);
    padding: 0 var(--okd-tabs-md-muted-label-padding)
}

.okui-tabs-pane-md.okui-tabs-pane-muted.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-md-muted-height)/2)
}

.okui-tabs-pane-md.okui-tabs-pane-muted-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-md-muted-active-font-weight, 400)
}

.okui-tabs-pane-md.okui-tabs-pane-segmented {
    border-radius: 4px;
    border-radius: var(--okd-tabs-md-segmented-border-radius, 4px);
    font-size: var(--okd-tabs-md-segmented-font-size);
    font-weight: var(--okd-tabs-md-segmented-font-weight);
    margin-right: var(--okd-tabs-md-segmented-spacing);
    padding: 0 var(--okd-tabs-md-segmented-label-padding)
}

.okui-tabs-pane-md.okui-tabs-pane-segmented-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-md-segmented-active-font-weight, 400)
}

.okui-tabs-pane-md.okui-tabs-pane-segmented.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-md-segmented-height)/2)
}

.okui-tabs-pane-list-md .okui-tabs-pane-list-nav-icon .icon {
    font-size: var(--okd-tabs-md-common-icon-size)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-underline {
    font-size: var(--okd-tabs-md-underline-font-size);
    height: var(--okd-tabs-md-underline-height)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-underline .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-md-underline-height)/2)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-button {
    font-size: var(--okd-tabs-md-button-font-size);
    height: var(--okd-tabs-md-button-height);
    line-height: var(--okd-tabs-md-button-height)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-button .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-md-button-container-border-radius, 4px)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-button .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-md-button-height)/2)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-muted {
    font-size: var(--okd-tabs-md-muted-font-size);
    height: var(--okd-tabs-md-muted-height);
    line-height: var(--okd-tabs-md-muted-height)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-muted .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-md-muted-container-border-radius, 4px)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-muted .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-md-muted-height)/2)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-segmented {
    font-size: var(--okd-tabs-md-segmented-font-size);
    height: var(--okd-tabs-md-segmented-height);
    line-height: var(--okd-tabs-md-segmented-height)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-segmented .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-md-segmented-container-border-radius, 4px)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-segmented .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-md-segmented-height)/2)
}

.okui-tabs-pane-list-md.okui-tabs-pane-list-segmented .okui-tabs-pane-list-flex {
    padding: var(--okd-tabs-md-segmented-container-padding)
}

.okui-tabs-pane-lg:last-child {
    margin-right: 0 !important
}

.okui-tabs-pane-lg.okui-tabs-pane-underline {
    font-size: var(--okd-tabs-lg-underline-font-size);
    font-weight: 400;
    font-weight: var(--okd-tabs-lg-underline-font-weight, 400);
    margin-right: var(--okd-tabs-lg-underline-spacing);
    padding: 0 var(--okd-tabs-lg-underline-label-padding)
}

.okui-tabs-pane-lg.okui-tabs-pane-underline.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-lg-underline-height)/2)
}

.okui-tabs-pane-lg.okui-tabs-pane-underline-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-lg-underline-active-font-weight, 400)
}

.okui-tabs-pane-lg.okui-tabs-pane-button {
    border-radius: 4px;
    border-radius: var(--okd-tabs-lg-button-border-radius, 4px);
    font-size: var(--okd-tabs-lg-button-font-size);
    font-weight: var(--okd-tabs-lg-button-font-weight);
    margin-right: var(--okd-tabs-lg-button-spacing);
    padding: 0 var(--okd-tabs-lg-button-label-padding)
}

.okui-tabs-pane-lg.okui-tabs-pane-button.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-lg-button-height)/2)
}

.okui-tabs-pane-lg.okui-tabs-pane-button-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-lg-button-active-font-weight, 400)
}

.okui-tabs-pane-lg.okui-tabs-pane-muted {
    border-radius: 4px;
    border-radius: var(--okd-tabs-lg-muted-border-radius, 4px);
    font-size: var(--okd-tabs-lg-muted-font-size);
    font-weight: var(--okd-tabs-lg-muted-font-weight);
    margin-right: var(--okd-tabs-lg-muted-spacing);
    padding: 0 var(--okd-tabs-lg-muted-label-padding)
}

.okui-tabs-pane-lg.okui-tabs-pane-muted.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-lg-muted-height)/2)
}

.okui-tabs-pane-lg.okui-tabs-pane-muted-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-lg-muted-active-font-weight, 400)
}

.okui-tabs-pane-lg.okui-tabs-pane-segmented {
    border-radius: 4px;
    border-radius: var(--okd-tabs-lg-segmented-border-radius, 4px);
    font-size: var(--okd-tabs-lg-segmented-font-size);
    font-weight: var(--okd-tabs-lg-segmented-font-weight);
    margin-right: var(--okd-tabs-lg-segmented-spacing);
    padding: 0 var(--okd-tabs-lg-segmented-label-padding)
}

.okui-tabs-pane-lg.okui-tabs-pane-segmented-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-lg-segmented-active-font-weight, 400)
}

.okui-tabs-pane-lg.okui-tabs-pane-segmented.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-lg-segmented-height)/2)
}

.okui-tabs-pane-list-lg .okui-tabs-pane-list-nav-icon .icon {
    font-size: var(--okd-tabs-lg-common-icon-size)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-underline {
    font-size: var(--okd-tabs-lg-underline-font-size);
    height: var(--okd-tabs-lg-underline-height)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-underline .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-lg-underline-height)/2)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-button {
    font-size: var(--okd-tabs-lg-button-font-size);
    height: var(--okd-tabs-lg-button-height);
    line-height: var(--okd-tabs-lg-button-height)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-button .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-lg-button-container-border-radius, 4px)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-button .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-lg-button-height)/2)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-muted {
    font-size: var(--okd-tabs-lg-muted-font-size);
    height: var(--okd-tabs-lg-muted-height);
    line-height: var(--okd-tabs-lg-muted-height)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-muted .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-lg-muted-container-border-radius, 4px)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-muted .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-lg-muted-height)/2)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-segmented {
    font-size: var(--okd-tabs-lg-segmented-font-size);
    height: var(--okd-tabs-lg-segmented-height);
    line-height: var(--okd-tabs-lg-segmented-height)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-segmented .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-lg-segmented-container-border-radius, 4px)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-segmented .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-lg-segmented-height)/2)
}

.okui-tabs-pane-list-lg.okui-tabs-pane-list-segmented .okui-tabs-pane-list-flex {
    padding: var(--okd-tabs-lg-segmented-container-padding)
}

.okui-tabs-pane-xl:last-child {
    margin-right: 0 !important
}

.okui-tabs-pane-xl.okui-tabs-pane-underline {
    font-size: var(--okd-tabs-xl-underline-font-size);
    font-weight: 400;
    font-weight: var(--okd-tabs-xl-underline-font-weight, 400);
    margin-right: var(--okd-tabs-xl-underline-spacing);
    padding: 0 var(--okd-tabs-xl-underline-label-padding)
}

.okui-tabs-pane-xl.okui-tabs-pane-underline.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xl-underline-height)/2)
}

.okui-tabs-pane-xl.okui-tabs-pane-underline-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xl-underline-active-font-weight, 400)
}

.okui-tabs-pane-xl.okui-tabs-pane-button {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xl-button-border-radius, 4px);
    font-size: var(--okd-tabs-xl-button-font-size);
    font-weight: var(--okd-tabs-xl-button-font-weight);
    margin-right: var(--okd-tabs-xl-button-spacing);
    padding: 0 var(--okd-tabs-xl-button-label-padding)
}

.okui-tabs-pane-xl.okui-tabs-pane-button.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xl-button-height)/2)
}

.okui-tabs-pane-xl.okui-tabs-pane-button-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xl-button-active-font-weight, 400)
}

.okui-tabs-pane-xl.okui-tabs-pane-muted {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xl-muted-border-radius, 4px);
    font-size: var(--okd-tabs-xl-muted-font-size);
    font-weight: var(--okd-tabs-xl-muted-font-weight);
    margin-right: var(--okd-tabs-xl-muted-spacing);
    padding: 0 var(--okd-tabs-xl-muted-label-padding)
}

.okui-tabs-pane-xl.okui-tabs-pane-muted.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xl-muted-height)/2)
}

.okui-tabs-pane-xl.okui-tabs-pane-muted-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xl-muted-active-font-weight, 400)
}

.okui-tabs-pane-xl.okui-tabs-pane-segmented {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xl-segmented-border-radius, 4px);
    font-size: var(--okd-tabs-xl-segmented-font-size);
    font-weight: var(--okd-tabs-xl-segmented-font-weight);
    margin-right: var(--okd-tabs-xl-segmented-spacing);
    padding: 0 var(--okd-tabs-xl-segmented-label-padding)
}

.okui-tabs-pane-xl.okui-tabs-pane-segmented-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xl-segmented-active-font-weight, 400)
}

.okui-tabs-pane-xl.okui-tabs-pane-segmented.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xl-segmented-height)/2)
}

.okui-tabs-pane-list-xl .okui-tabs-pane-list-nav-icon .icon {
    font-size: var(--okd-tabs-xl-common-icon-size)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-underline {
    font-size: var(--okd-tabs-xl-underline-font-size);
    height: var(--okd-tabs-xl-underline-height)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-underline .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xl-underline-height)/2)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-button {
    font-size: var(--okd-tabs-xl-button-font-size);
    height: var(--okd-tabs-xl-button-height);
    line-height: var(--okd-tabs-xl-button-height)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-button .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xl-button-container-border-radius, 4px)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-button .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xl-button-height)/2)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-muted {
    font-size: var(--okd-tabs-xl-muted-font-size);
    height: var(--okd-tabs-xl-muted-height);
    line-height: var(--okd-tabs-xl-muted-height)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-muted .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xl-muted-container-border-radius, 4px)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-muted .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xl-muted-height)/2)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-segmented {
    font-size: var(--okd-tabs-xl-segmented-font-size);
    height: var(--okd-tabs-xl-segmented-height);
    line-height: var(--okd-tabs-xl-segmented-height)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-segmented .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xl-segmented-container-border-radius, 4px)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-segmented .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xl-segmented-height)/2)
}

.okui-tabs-pane-list-xl.okui-tabs-pane-list-segmented .okui-tabs-pane-list-flex {
    padding: var(--okd-tabs-xl-segmented-container-padding)
}

.okui-tabs-pane-xxl:last-child {
    margin-right: 0 !important
}

.okui-tabs-pane-xxl.okui-tabs-pane-underline {
    font-size: var(--okd-tabs-xxl-underline-font-size);
    font-weight: 400;
    font-weight: var(--okd-tabs-xxl-underline-font-weight, 400);
    margin-right: var(--okd-tabs-xxl-underline-spacing);
    padding: 0 var(--okd-tabs-xxl-underline-label-padding)
}

.okui-tabs-pane-xxl.okui-tabs-pane-underline.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxl-underline-height)/2)
}

.okui-tabs-pane-xxl.okui-tabs-pane-underline-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxl-underline-active-font-weight, 400)
}

.okui-tabs-pane-xxl.okui-tabs-pane-button {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxl-button-border-radius, 4px);
    font-size: var(--okd-tabs-xxl-button-font-size);
    font-weight: var(--okd-tabs-xxl-button-font-weight);
    margin-right: var(--okd-tabs-xxl-button-spacing);
    padding: 0 var(--okd-tabs-xxl-button-label-padding)
}

.okui-tabs-pane-xxl.okui-tabs-pane-button.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxl-button-height)/2)
}

.okui-tabs-pane-xxl.okui-tabs-pane-button-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxl-button-active-font-weight, 400)
}

.okui-tabs-pane-xxl.okui-tabs-pane-muted {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxl-muted-border-radius, 4px);
    font-size: var(--okd-tabs-xxl-muted-font-size);
    font-weight: var(--okd-tabs-xxl-muted-font-weight);
    margin-right: var(--okd-tabs-xxl-muted-spacing);
    padding: 0 var(--okd-tabs-xxl-muted-label-padding)
}

.okui-tabs-pane-xxl.okui-tabs-pane-muted.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxl-muted-height)/2)
}

.okui-tabs-pane-xxl.okui-tabs-pane-muted-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxl-muted-active-font-weight, 400)
}

.okui-tabs-pane-xxl.okui-tabs-pane-segmented {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxl-segmented-border-radius, 4px);
    font-size: var(--okd-tabs-xxl-segmented-font-size);
    font-weight: var(--okd-tabs-xxl-segmented-font-weight);
    margin-right: var(--okd-tabs-xxl-segmented-spacing);
    padding: 0 var(--okd-tabs-xxl-segmented-label-padding)
}

.okui-tabs-pane-xxl.okui-tabs-pane-segmented-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxl-segmented-active-font-weight, 400)
}

.okui-tabs-pane-xxl.okui-tabs-pane-segmented.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxl-segmented-height)/2)
}

.okui-tabs-pane-list-xxl .okui-tabs-pane-list-nav-icon .icon {
    font-size: var(--okd-tabs-xxl-common-icon-size)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-underline {
    font-size: var(--okd-tabs-xxl-underline-font-size);
    height: var(--okd-tabs-xxl-underline-height)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-underline .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxl-underline-height)/2)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-button {
    font-size: var(--okd-tabs-xxl-button-font-size);
    height: var(--okd-tabs-xxl-button-height);
    line-height: var(--okd-tabs-xxl-button-height)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-button .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxl-button-container-border-radius, 4px)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-button .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxl-button-height)/2)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-muted {
    font-size: var(--okd-tabs-xxl-muted-font-size);
    height: var(--okd-tabs-xxl-muted-height);
    line-height: var(--okd-tabs-xxl-muted-height)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-muted .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxl-muted-container-border-radius, 4px)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-muted .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxl-muted-height)/2)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-segmented {
    font-size: var(--okd-tabs-xxl-segmented-font-size);
    height: var(--okd-tabs-xxl-segmented-height);
    line-height: var(--okd-tabs-xxl-segmented-height)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-segmented .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxl-segmented-container-border-radius, 4px)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-segmented .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxl-segmented-height)/2)
}

.okui-tabs-pane-list-xxl.okui-tabs-pane-list-segmented .okui-tabs-pane-list-flex {
    padding: var(--okd-tabs-xxl-segmented-container-padding)
}

.okui-tabs-pane-xxxl:last-child {
    margin-right: 0 !important
}

.okui-tabs-pane-xxxl.okui-tabs-pane-underline {
    font-size: var(--okd-tabs-xxxl-underline-font-size);
    font-weight: 400;
    font-weight: var(--okd-tabs-xxxl-underline-font-weight, 400);
    margin-right: var(--okd-tabs-xxxl-underline-spacing);
    padding: 0 var(--okd-tabs-xxxl-underline-label-padding)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-underline.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxxl-underline-height)/2)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-underline-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxxl-underline-active-font-weight, 400)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-button {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxxl-button-border-radius, 4px);
    font-size: var(--okd-tabs-xxxl-button-font-size);
    font-weight: var(--okd-tabs-xxxl-button-font-weight);
    margin-right: var(--okd-tabs-xxxl-button-spacing);
    padding: 0 var(--okd-tabs-xxxl-button-label-padding)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-button.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxxl-button-height)/2)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-button-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxxl-button-active-font-weight, 400)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-muted {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxxl-muted-border-radius, 4px);
    font-size: var(--okd-tabs-xxxl-muted-font-size);
    font-weight: var(--okd-tabs-xxxl-muted-font-weight);
    margin-right: var(--okd-tabs-xxxl-muted-spacing);
    padding: 0 var(--okd-tabs-xxxl-muted-label-padding)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-muted.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxxl-muted-height)/2)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-muted-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxxl-muted-active-font-weight, 400)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-segmented {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxxl-segmented-border-radius, 4px);
    font-size: var(--okd-tabs-xxxl-segmented-font-size);
    font-weight: var(--okd-tabs-xxxl-segmented-font-weight);
    margin-right: var(--okd-tabs-xxxl-segmented-spacing);
    padding: 0 var(--okd-tabs-xxxl-segmented-label-padding)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-segmented-active {
    font-weight: 400;
    font-weight: var(--okd-tabs-xxxl-segmented-active-font-weight, 400)
}

.okui-tabs-pane-xxxl.okui-tabs-pane-segmented.okui-tabs-pane-circle {
    border-radius: calc(var(--okd-tabs-xxxl-segmented-height)/2)
}

.okui-tabs-pane-list-xxxl .okui-tabs-pane-list-nav-icon .icon {
    font-size: var(--okd-tabs-xxxl-common-icon-size)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-underline {
    font-size: var(--okd-tabs-xxxl-underline-font-size);
    height: var(--okd-tabs-xxxl-underline-height)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-underline .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxxl-underline-height)/2)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-button {
    font-size: var(--okd-tabs-xxxl-button-font-size);
    height: var(--okd-tabs-xxxl-button-height);
    line-height: var(--okd-tabs-xxxl-button-height)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-button .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxxl-button-container-border-radius, 4px)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-button .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxxl-button-height)/2)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-muted {
    font-size: var(--okd-tabs-xxxl-muted-font-size);
    height: var(--okd-tabs-xxxl-muted-height);
    line-height: var(--okd-tabs-xxxl-muted-height)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-muted .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxxl-muted-container-border-radius, 4px)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-muted .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxxl-muted-height)/2)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-segmented {
    font-size: var(--okd-tabs-xxxl-segmented-font-size);
    height: var(--okd-tabs-xxxl-segmented-height);
    line-height: var(--okd-tabs-xxxl-segmented-height)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-segmented .okui-tabs-pane-list-container {
    border-radius: 4px;
    border-radius: var(--okd-tabs-xxxl-segmented-container-border-radius, 4px)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-segmented .okui-tabs-pane-list-circle {
    border-radius: calc(var(--okd-tabs-xxxl-segmented-height)/2)
}

.okui-tabs-pane-list-xxxl.okui-tabs-pane-list-segmented .okui-tabs-pane-list-flex {
    padding: var(--okd-tabs-xxxl-segmented-container-padding)
}

.okui-tabs-pane.okui-tabs-pane-blue-no-border.okui-tabs-pane-underline-active {
    border-bottom-color: transparent
}

.okui-tabs-pane-blue.okui-tabs-pane-underline {
    color: var(--okd-tabs-underline-pane-common-label-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-underline:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: -2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane-blue.okui-tabs-pane-underline-active {
    border-bottom-color: var(--okd-tabs-underline-pane-blue-border-active-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-underline-active,
.okui-tabs-pane-blue.okui-tabs-pane-underline:hover:not(.is-mobile) {
    color: var(--okd-tabs-underline-pane-blue-label-active-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-button {
    color: var(--okd-tabs-button-pane-common-label-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-button-active {
    background-color: var(--okd-tabs-button-pane-blue-bg-active-color);
    border-color: transparent;
    color: var(--okd-tabs-button-pane-blue-label-active-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-button:hover:not(.is-mobile) {
    border-color: var(--okd-tabs-button-pane-blue-bg-active-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-muted {
    color: var(--okd-tabs-muted-pane-common-label-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-muted-active {
    border-color: var(--okd-tabs-muted-pane-blue-border-active-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-muted-active,
.okui-tabs-pane-blue.okui-tabs-pane-muted:hover:not(.is-mobile) {
    color: var(--okd-tabs-muted-pane-blue-label-active-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-segmented {
    color: var(--okd-tabs-segmented-pane-common-label-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-segmented-active {
    background-color: var(--okd-tabs-segmented-pane-blue-bg-active-color);
    color: var(--okd-tabs-segmented-pane-blue-label-active-color)
}

.okui-tabs-pane-blue.okui-tabs-pane-segmented-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-tabs-segmented-pane-blue-label-active-color);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane-list-blue .okui-tabs-transitions-underline {
    background-color: var(--okd-tabs-underline-pane-blue-border-active-color)
}

.okui-tabs-pane.okui-tabs-pane-grey-no-border.okui-tabs-pane-underline-active {
    border-bottom-color: transparent
}

.okui-tabs-pane-grey.okui-tabs-pane-underline {
    color: var(--okd-tabs-underline-pane-common-label-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-underline:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: -2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane-grey.okui-tabs-pane-underline-active {
    border-bottom-color: var(--okd-tabs-underline-pane-grey-border-active-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-underline-active,
.okui-tabs-pane-grey.okui-tabs-pane-underline:hover:not(.is-mobile) {
    color: var(--okd-tabs-underline-pane-grey-label-active-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-button {
    color: var(--okd-tabs-button-pane-common-label-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-button-active {
    background-color: var(--okd-tabs-button-pane-grey-bg-active-color);
    border-color: transparent;
    color: var(--okd-tabs-button-pane-grey-label-active-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-button:hover:not(.is-mobile) {
    border-color: var(--okd-tabs-button-pane-grey-bg-active-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-muted {
    color: var(--okd-tabs-muted-pane-common-label-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-muted-active {
    border-color: var(--okd-tabs-muted-pane-grey-border-active-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-muted-active,
.okui-tabs-pane-grey.okui-tabs-pane-muted:hover:not(.is-mobile) {
    color: var(--okd-tabs-muted-pane-grey-label-active-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-segmented {
    color: var(--okd-tabs-segmented-pane-common-label-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-segmented-active {
    background-color: var(--okd-tabs-segmented-pane-grey-bg-active-color);
    color: var(--okd-tabs-segmented-pane-grey-label-active-color)
}

.okui-tabs-pane-grey.okui-tabs-pane-segmented-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-tabs-segmented-pane-grey-label-active-color);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane-list-grey .okui-tabs-transitions-underline {
    background-color: var(--okd-tabs-underline-pane-grey-border-active-color)
}

.okui-tabs-pane.okui-tabs-pane-green-no-border.okui-tabs-pane-underline-active {
    border-bottom-color: transparent
}

.okui-tabs-pane-green.okui-tabs-pane-underline {
    color: var(--okd-tabs-underline-pane-common-label-color)
}

.okui-tabs-pane-green.okui-tabs-pane-underline:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: -2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane-green.okui-tabs-pane-underline-active {
    border-bottom-color: var(--okd-tabs-underline-pane-green-border-active-color)
}

.okui-tabs-pane-green.okui-tabs-pane-underline-active,
.okui-tabs-pane-green.okui-tabs-pane-underline:hover:not(.is-mobile) {
    color: var(--okd-tabs-underline-pane-green-label-active-color)
}

.okui-tabs-pane-green.okui-tabs-pane-button {
    color: var(--okd-tabs-button-pane-common-label-color)
}

.okui-tabs-pane-green.okui-tabs-pane-button-active {
    background-color: var(--okd-tabs-button-pane-green-bg-active-color);
    border-color: transparent;
    color: var(--okd-tabs-button-pane-green-label-active-color)
}

.okui-tabs-pane-green.okui-tabs-pane-button:hover:not(.is-mobile) {
    border-color: var(--okd-tabs-button-pane-green-bg-active-color)
}

.okui-tabs-pane-green.okui-tabs-pane-muted {
    color: var(--okd-tabs-muted-pane-common-label-color)
}

.okui-tabs-pane-green.okui-tabs-pane-muted-active {
    border-color: var(--okd-tabs-muted-pane-green-border-active-color)
}

.okui-tabs-pane-green.okui-tabs-pane-muted-active,
.okui-tabs-pane-green.okui-tabs-pane-muted:hover:not(.is-mobile) {
    color: var(--okd-tabs-muted-pane-green-label-active-color)
}

.okui-tabs-pane-green.okui-tabs-pane-segmented {
    color: var(--okd-tabs-segmented-pane-common-label-color)
}

.okui-tabs-pane-green.okui-tabs-pane-segmented-active {
    background-color: var(--okd-tabs-segmented-pane-green-bg-active-color);
    color: var(--okd-tabs-segmented-pane-green-label-active-color)
}

.okui-tabs-pane-green.okui-tabs-pane-segmented-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-tabs-segmented-pane-green-label-active-color);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane-list-green .okui-tabs-transitions-underline {
    background-color: var(--okd-tabs-underline-pane-green-border-active-color)
}

.okui-tabs-pane.okui-tabs-pane-red-no-border.okui-tabs-pane-underline-active {
    border-bottom-color: transparent
}

.okui-tabs-pane-red.okui-tabs-pane-underline {
    color: var(--okd-tabs-underline-pane-common-label-color)
}

.okui-tabs-pane-red.okui-tabs-pane-underline:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: -2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane-red.okui-tabs-pane-underline-active {
    border-bottom-color: var(--okd-tabs-underline-pane-red-border-active-color)
}

.okui-tabs-pane-red.okui-tabs-pane-underline-active,
.okui-tabs-pane-red.okui-tabs-pane-underline:hover:not(.is-mobile) {
    color: var(--okd-tabs-underline-pane-red-label-active-color)
}

.okui-tabs-pane-red.okui-tabs-pane-button {
    color: var(--okd-tabs-button-pane-common-label-color)
}

.okui-tabs-pane-red.okui-tabs-pane-button-active {
    background-color: var(--okd-tabs-button-pane-red-bg-active-color);
    border-color: transparent;
    color: var(--okd-tabs-button-pane-red-label-active-color)
}

.okui-tabs-pane-red.okui-tabs-pane-button:hover:not(.is-mobile) {
    border-color: var(--okd-tabs-button-pane-red-bg-active-color)
}

.okui-tabs-pane-red.okui-tabs-pane-muted {
    color: var(--okd-tabs-muted-pane-common-label-color)
}

.okui-tabs-pane-red.okui-tabs-pane-muted-active {
    border-color: var(--okd-tabs-muted-pane-red-border-active-color)
}

.okui-tabs-pane-red.okui-tabs-pane-muted-active,
.okui-tabs-pane-red.okui-tabs-pane-muted:hover:not(.is-mobile) {
    color: var(--okd-tabs-muted-pane-red-label-active-color)
}

.okui-tabs-pane-red.okui-tabs-pane-segmented {
    color: var(--okd-tabs-segmented-pane-common-label-color)
}

.okui-tabs-pane-red.okui-tabs-pane-segmented-active {
    background-color: var(--okd-tabs-segmented-pane-red-bg-active-color);
    color: var(--okd-tabs-segmented-pane-red-label-active-color)
}

.okui-tabs-pane-red.okui-tabs-pane-segmented-active:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-tabs-segmented-pane-red-label-active-color);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane-list-red .okui-tabs-transitions-underline {
    background-color: var(--okd-tabs-underline-pane-red-border-active-color)
}

.okui-tabs-pane {
    align-items: center;
    box-sizing: border-box;
    color: var(--okd-tabs-common-pane-label-color);
    cursor: pointer;
    display: flex;
    font-weight: 500;
    height: 100%;
    justify-content: center;
    text-align: center;
    white-space: nowrap
}

.okui-tabs-pane:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: -4px;
    outline-style: solid;
    outline-width: 2px
}

.okui-tabs-pane-underline {
    border-bottom: 2px solid transparent;
    padding-top: 2px
}

.okui-tabs-pane.no-active-border {
    border-bottom: none;
    padding-top: 0
}

.okui-tabs-pane-button {
    border: 1px solid var(--okd-tabs-button-pane-common-border-color);
    border-radius: var(--okd-tabs-button-pane-common-border-radius)
}

.okui-tabs-pane-button.okui-tabs-pane-button-no-border {
    border: none
}

.okui-tabs-pane-muted {
    border: 1px solid var(--okd-tabs-muted-pane-common-border-color);
    border-radius: var(--okd-tabs-muted-pane-common-border-radius)
}

.okui-tabs-pane-segmented {
    border-radius: var(--okd-tabs-segmented-pane-common-border-radius);
    line-height: 1
}

.okui-tabs-pane-segmented-active {
    box-shadow: var(--okd-tabs-segmented-pane-common-shadow)
}

.okui-tabs-pane-no-padding {
    padding: 0 !important
}

.okui-tabs .okui-tabs-pane.okui-tabs-pane-spacing {
    margin-right: var(--okd-inner-tabs-spacing)
}

a.okui-tabs-pane {
    text-decoration: none
}

.okui-tabs-panel {
    display: none;
    width: 100%
}

.okui-tabs-panel:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: -2px;
    outline-style: solid;
    outline-width: 1px
}

.okui-tabs-panel-show {
    display: block
}

.okui-tabs-pane-list {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    position: relative;
    width: 100%
}

.okui-tabs-pane-list-wrapper {
    display: flex;
    flex: 1 1;
    overflow: hidden;
    position: relative
}

.okui-tabs-pane-list-center {
    justify-content: center
}

.okui-tabs-pane-list-slot {
    height: 100%
}

.okui-tabs-pane-list-container {
    box-sizing: border-box;
    display: flex;
    overflow: scroll;
    position: relative;
    scroll-behavior: smooth;
    scrollbar-width: none
}

.okui-tabs-pane-list-container::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0
}

.okui-tabs-pane-list-nav {
    --okd-inner-tabs-nav-button-bg-color: var(--okd-tabs-common-pane-nav-icon-bg-color-1);
    cursor: pointer
}

.okui-tabs-pane-list-nav-icon {
    align-items: center;
    background-image: linear-gradient(270deg, var(--okd-inner-tabs-nav-button-bg-color) 72.22%, var(--okd-tabs-common-pane-nav-icon-bg-color-2) 100%);
    color: var(--okd-tabs-common-pane-icon-color);
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 36px;
    z-index: 9
}

.okui-tabs-pane-list-nav-icon:hover {
    color: var(--okd-tabs-common-pane-icon-active-color)
}

.okui-tabs-pane-list-nav .icon-left {
    background-image: linear-gradient(-270deg, var(--okd-inner-tabs-nav-button-bg-color) 72.22%, var(--okd-tabs-common-pane-nav-icon-bg-color-2) 100%);
    left: 0
}

.okui-tabs-pane-list-nav .icon-left-inner {
    transform: rotate(180deg)
}

.okui-tabs-pane-list-nav .icon-right {
    right: 0
}

.okui-tabs-pane-list-flex-shrink {
    display: flex;
    flex-shrink: 0;
    position: relative;
    transition: transform .2s
}

.okui-tabs-pane-list-flex {
    flex: 1 1
}

.okui-tabs-pane-list-overflow {
    overflow: visible;
    overflow: initial
}

.okui-tabs-pane-list-average,
.okui-tabs-pane-list-average .okui-tabs-pane {
    flex: 1 1
}

.okui-tabs-pane-list-right-alpha {
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, var(--okd-tabs-common-pane-icon-bg-color) 100%);
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    z-index: 9
}

.okui-tabs-pane-list-underline {
    border-bottom: 1px solid var(--okd-tabs-underline-pane-common-border-color)
}

.okui-tabs-pane-list-underline-no-line {
    border-bottom: none
}

.okui-tabs-pane-list-segmented .okui-tabs-pane-list-container {
    background-color: var(--okd-tabs-segmented-pane-common-list-bg-color);
    border-radius: 4px
}

.okui-tabs-panel-list {
    display: flex;
    flex: auto;
    width: 100%
}

.okui-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%
}

.okui-tabs-transitions-underline {
    bottom: 0;
    height: 2px;
    left: 0;
    position: absolute;
    transition: all .3s
}

.okui-popover .okui-popup-layer-content {
    padding: 0
}

.okui-popover .okui-popup-layer-arrow-inner {
    background-color: var(--okd-popover-layer-background);
    border-color: var(--okd-popover-layer-border-color)
}

.okui-popover-arrow-special .okui-popup-layer-arrow[change-color] .okui-popup-layer-arrow-inner {
    background-color: var(--okd-popover-title-background)
}

.okui-popover-arrow-special[data-popper-placement*=bottom] .okui-popup-layer-arrow-inner {
    background-color: var(--okd-popover-title-background) !important
}

.okui-popover-content {
    background-color: var(--okd-popover-layer-background);
    border: 1px solid var(--okd-popover-layer-border-color);
    border-radius: 4px;
    box-shadow: var(--okd-popover-common-layer-shadow);
    max-width: var(--okd-popover-common-layer-width)
}

.okui-popover-content-title {
    background-color: var(--okd-popover-title-background);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: var(--okd-popover-title-color);
    font-weight: 500;
    line-height: 20px;
    padding: 8px 12px;
    position: relative
}

.okui-popover-content-desc {
    background-color: var(--okd-popover-desc-background);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    color: var(--okd-popover-desc-color);
    overflow: hidden;
    padding: var(--okd-popover-common-padding)
}

.okui-popover-content-desc .okui-popover-content-desc-link {
    color: var(--okd-popover-link-color);
    cursor: pointer;
    font-weight: 500;
    padding-left: 4px;
    text-decoration: underline
}

.okui-popover-content-desc-button {
    color: var(--okd-popover-action-color);
    cursor: pointer;
    float: right;
    font-weight: 500;
    margin-top: 20px;
    overflow: hidden;
    padding: 0 10px;
    text-align: right
}

.okui-popover-content-desc-radius {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.okui-popover-md .okui-popover-content {
    font-size: var(--okd-popover-md-font-size);
    line-height: var(--okd-popover-md-line-height)
}

.okui-popover-md .okui-popover-content-title {
    font-size: var(--okd-popover-md-title-font-size)
}

.okui-popover-sm .okui-popover-content {
    font-size: var(--okd-popover-sm-font-size);
    line-height: var(--okd-popover-sm-line-height)
}

.okui-popover-sm .okui-popover-content-title {
    font-size: var(--okd-popover-sm-title-font-size)
}

.okui-picker-view {
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%
}

.okui-picker-view-button {
    box-sizing: border-box;
    height: 56px;
    padding-right: 23px;
    padding-top: 12px;
    text-align: right
}

.okui-picker-view-wheel-column {
    flex: 1 1;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none
}

.okui-picker-view-wheel-column::-webkit-scrollbar {
    display: none
}

.okui-picker-view-wheel-column .column-item-container {
    height: 100%
}

.okui-picker-view-wheel-column-item {
    color: #929292;
    color: var(--okd-pickerview-item-default-font-color, #929292);
    cursor: pointer;
    font-size: 14px;
    font-size: var(--okd-pickerview-item-default-font-size, 14px);
    font-weight: 400;
    font-weight: var(--okd-pickerview-item-default-font-weight, 400);
    height: 36px;
    height: var(--okd-pickerview-item-default-height, 36px);
    line-height: 36px;
    line-height: var(--okd-pickerview-item-default-height, 36px);
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%
}

.okui-picker-view-wheel-column-item-active {
    color: #000;
    color: var(--okd-pickerview-item-active-font-color, #000);
    font-weight: 500;
    font-weight: var(--okd-pickerview-item-active-font-weight, 500)
}

@media (max-width:767px) {
    .okui-picker-view-wheel-column-item {
        font-size: 16px;
        font-size: var(--okd-pickerview-sm-item-default-font-size, 16px)
    }
}

.okui-picker-view-wheel-column-empty {
    height: calc(50% - 18px);
    height: calc(50% - var(--okd-pickerview-item-default-height, 36px)/2)
}

.okui-picker-view-mask {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000
}

.okui-picker-view-mask-middle {
    border-bottom: 1px solid #ebebeb;
    border-bottom: 1px solid var(--okd-pickerview-item-active-border-color, #ebebeb);
    border-top: 1px solid #ebebeb;
    border-top: 1px solid var(--okd-pickerview-item-active-border-color, #ebebeb);
    box-sizing: border-box;
    flex: none;
    height: 36px;
    height: var(--okd-pickerview-item-default-height, 36px)
}

.okui-datepicker-reference {
    position: relative
}

.okui-datepicker-reference-native {
    background: transparent;
    color: transparent;
    height: 100%;
    left: 0;
    outline: none;
    padding-right: 8px;
    position: absolute;
    top: 0;
    width: calc(100% - 42px);
    z-index: 100
}

.okui-datepicker-input-custom-icon {
    color: var(--okd-color-gray-400);
    color: var(--okd-datepicker-input-icon-color, var(--okd-color-gray-400));
    cursor: pointer
}

.okui-datepicker-input-icon-disabled {
    cursor: not-allowed
}

.okui-datepicker .okui-datepicker-input-xs-icon-size {
    font-size: 16px;
    font-size: var(--okd-datepicker-xs-icon-font-size, 16px)
}

.okui-datepicker .okui-datepicker-input-sm-icon-size {
    font-size: 16px;
    font-size: var(--okd-datepicker-sm-icon-font-size, 16px)
}

.okui-datepicker .okui-datepicker-input-md-icon-size {
    font-size: 16px;
    font-size: var(--okd-datepicker-md-icon-font-size, 16px)
}

.okui-datepicker .okui-datepicker-input-lg-icon-size {
    font-size: 18px;
    font-size: var(--okd-datepicker-lg-icon-font-size, 18px)
}

.okui-datepicker .okui-datepicker-input-xl-icon-size {
    font-size: 20px;
    font-size: var(--okd-datepicker-xl-icon-font-size, 20px)
}

.okui-datepicker-header {
    color: var(--okd-datepicker-title-default-color);
    color: var(--okd-datepicker-panel-header-default-text-color, var(--okd-datepicker-title-default-color));
    display: flex;
    font-size: 16px;
    font-weight: 500;
    height: 36px;
    justify-content: space-between;
    line-height: 36px;
    padding: 0 16px
}

.okui-datepicker-header-block {
    align-items: center;
    display: flex;
    font-size: 14px
}

.okui-datepicker-header .text-box {
    border-radius: 4px;
    cursor: pointer;
    padding: 8px
}

.okui-datepicker-header .text-box:hover {
    background-color: var(--okd-color-gray-100);
    background-color: var(--okd-datepicker-panel-header-hover-text-bg-color, var(--okd-color-gray-100))
}

.okui-datepicker-header .header-icon {
    margin-left: 4px;
    transition: transform .2s;
    vertical-align: middle
}

.okui-datepicker-header .arrow-up {
    transform: rotate(180deg)
}

.okui-datepicker-header .display-year {
    align-items: center;
    display: flex;
    margin-left: 8px
}

.okui-datepicker-header .nav-box .nav-icon {
    color: var(--okd-datepicker-icon-default-color);
    color: var(--okd-datepicker-panel-header-default-icon-color, var(--okd-datepicker-icon-default-color));
    font-size: 20px
}

.okui-datepicker-header .nav-box .nav-item {
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px
}

.okui-datepicker-header .nav-box .nav-item:hover {
    background-color: var(--okd-color-gray-100);
    background-color: var(--okd-datepicker-panel-header-hover-icon-bg-color, var(--okd-color-gray-100))
}

.okui-datepicker-header .nav-box .nav-item:last-child {
    margin-left: 4px
}

.okui-datepicker-body {
    display: flex
}

.okui-datepicker-panel-day {
    color: var(--okd-datepicker-day-default-text-color)
}

.okui-datepicker-panel-day:not(.okui-datepicker-panel-day-disabled):not(.okui-datepicker-panel-day-active):hover .item-inner {
    background-color: var(--okd-datepicker-day-hover-background)
}

.okui-datepicker-panel-day-active:not(.okui-datepicker-panel-day-disable) .item-inner {
    background-color: var(--okd-datepicker-day-selected-background);
    color: var(--okd-datepicker-day-selected-text-color);
    font-weight: 500
}

.okui-datepicker-panel-day-disabled:not(.okui-datepicker-panel-day-notSelectable) {
    background-color: var(--okd-datepicker-day-disable-background);
    color: var(--okd-datepicker-day-disable-text-color);
    cursor: not-allowed
}

.okui-datepicker-panel-day-disabled:not(.okui-datepicker-panel-day-notSelectable) .okui-datepicker-panel-today {
    border-color: var(--okd-datepicker-today-border-disable-color)
}

.okui-datepicker-panel-day-notSelectable {
    cursor: not-allowed
}

.okui-datepicker-panel-month {
    color: var(--okd-datepicker-month-default-text-color)
}

.okui-datepicker-panel-month:not(.okui-datepicker-panel-month-disabled):not(.okui-datepicker-panel-month-active):hover .item-inner {
    background-color: var(--okd-datepicker-month-hover-background)
}

.okui-datepicker-panel-month-active:not(.okui-datepicker-panel-month-disable) .item-inner {
    background-color: var(--okd-datepicker-month-selected-background);
    color: var(--okd-datepicker-month-selected-text-color);
    font-weight: 500
}

.okui-datepicker-panel-month-disabled:not(.okui-datepicker-panel-month-notSelectable) {
    background-color: var(--okd-datepicker-month-disable-background);
    color: var(--okd-datepicker-month-disable-text-color);
    cursor: not-allowed
}

.okui-datepicker-panel-month-disabled:not(.okui-datepicker-panel-month-notSelectable) .okui-datepicker-panel-today {
    border-color: var(--okd-datepicker-today-border-disable-color)
}

.okui-datepicker-panel-month-notSelectable {
    cursor: not-allowed
}

.okui-datepicker-panel-year {
    color: var(--okd-datepicker-year-default-text-color)
}

.okui-datepicker-panel-year:not(.okui-datepicker-panel-year-disabled):not(.okui-datepicker-panel-year-active):hover .item-inner {
    background-color: var(--okd-datepicker-year-hover-background)
}

.okui-datepicker-panel-cover:before {
    background-color: var(--okd-datepicker-day-range-background)
}

.okui-datepicker-panel-year-active:not(.okui-datepicker-panel-year-disable) .item-inner {
    background-color: var(--okd-datepicker-year-selected-background);
    color: var(--okd-datepicker-year-selected-text-color);
    font-weight: 500
}

.okui-datepicker-panel-year-disabled:not(.okui-datepicker-panel-year-notSelectable) {
    background-color: var(--okd-datepicker-year-disable-background);
    color: var(--okd-datepicker-year-disable-text-color);
    cursor: not-allowed
}

.okui-datepicker-panel-year-disabled:not(.okui-datepicker-panel-year-notSelectable) .okui-datepicker-panel-today {
    border-color: var(--okd-datepicker-today-border-disable-color)
}

.okui-datepicker-panel-year-notSelectable {
    cursor: not-allowed
}

.okui-datepicker-panel {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    height: 100%;
    padding: 0 16px 16px;
    width: 100%
}

.okui-datepicker-panel-header {
    border-bottom: 1px solid var(--okd-color-line-muted);
    display: flex;
    height: 36px;
    margin-bottom: 8px
}

.okui-datepicker-panel-footer {
    border-top: 1px solid var(--okd-color-line-muted);
    display: flex;
    justify-content: flex-end;
    padding: 12px 22px
}

.okui-datepicker-panel-footer .confirm-button {
    margin-left: 12px
}

.okui-datepicker-panel-week {
    align-items: center;
    color: var(--okd-datepicker-week-default-text-color);
    display: flex;
    flex: 1 1;
    font-size: 12px;
    justify-content: center;
    text-align: center
}

.okui-datepicker-panel-main {
    cursor: pointer;
    display: flex;
    flex: 1 1;
    flex-direction: column
}

.okui-datepicker-panel-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    width: 100%
}

.okui-datepicker-panel-row:last-child {
    margin-bottom: 0
}

.okui-datepicker-panel-row-week:hover .okui-datepicker-panel-day:not(.okui-datepicker-panel-day-disabled):before {
    background-color: var(--okd-datepicker-day-range-background)
}

.okui-datepicker-panel-item {
    flex: 1 1;
    flex-direction: column
}

.okui-datepicker-panel-item,
.okui-datepicker-panel-item .item-inner {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative
}

.okui-datepicker-panel-item .item-inner {
    border-radius: 50%;
    height: 32px;
    width: 32px;
    z-index: 2
}

.okui-datepicker-panel-item:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1
}

.okui-datepicker-panel-item.range-start:before {
    border-radius: 50% 0 0 50%
}

.okui-datepicker-panel-item.range-end:before {
    border-radius: 0 50% 50% 0
}

.okui-datepicker-panel-hidden {
    visibility: hidden
}

.okui-datepicker-panel-today .item-inner {
    background-color: var(--okd-color-gray-050);
    background-color: var(--okd-datepicker-today-bg-color, var(--okd-color-gray-050));
    color: var(--okd-datepicker-today-border-color);
    color: var(--okd-datepicker-today-text-color, var(--okd-datepicker-today-border-color));
    font-weight: 500
}

.okui-datepicker-panel-second {
    color: var(--okd-datepicker-day-second-color);
    font-weight: 400
}

.okui-datepicker-panel-second .okui-datepicker-panel-today {
    border-color: var(--okd-datepicker-today-border-disable-color)
}

.okui-datepicker-panel.no-padding {
    padding: 0
}

.okui-datepicker-panel .picker-scroll-view {
    direction: ltr;
    height: 260px;
    height: var(--okd-datepicker-scroll-container-height, 260px);
    padding: 0;
    padding: var(--okd-datepicker-scroll-container-padding-vertical, 0) var(--okd-datepicker-scroll-container-padding-horizontal, 0)
}

.okui-datepicker-panel .picker-scroll-view .scroll-view-mask {
    background-color: transparent;
    background-color: var(--okd-datepicker-scroll-item-active-background, transparent);
    border-bottom: 1px solid #ebebeb;
    border-bottom: 1px solid var(--okd-datepicker-scroll-item-active-border-color, #ebebeb);
    border-radius: 0;
    border-radius: var(--okd-datepicker-scroll-item-active-radius, 0);
    border-top: 1px solid #ebebeb;
    border-top: 1px solid var(--okd-datepicker-scroll-item-active-border-color, #ebebeb);
    height: 36px;
    height: var(--okd-datepicker-scroll-item-default-height, 36px);
    margin: 0;
    margin: 0 var(--okd-datepicker-scroll-container-padding-horizontal, 0)
}

.okui-datepicker-panel .picker-scroll-view .scroll-view-item {
    color: #929292;
    color: var(--okd-datepicker-scroll-item-default-font-color, #929292);
    font-size: 14px;
    font-size: var(--okd-datepicker-scroll-item-default-font-size, 14px);
    font-weight: 400;
    font-weight: var(--okd-datepicker-scroll-item-default-font-weight, 400);
    height: 36px;
    height: var(--okd-datepicker-scroll-item-default-height, 36px);
    line-height: 36px;
    line-height: var(--okd-datepicker-scroll-item-default-height, 36px)
}

.okui-datepicker-panel .picker-scroll-view .scroll-view-item-active {
    color: #000;
    color: var(--okd-datepicker-scroll-item-active-font-color, #000);
    font-size: 16px;
    font-size: var(--okd-datepicker-scroll-item-active-font-size, 16px);
    font-weight: 500;
    font-weight: var(--okd-datepicker-scroll-item-active-font-weight, 500)
}

@media (max-width:767px) {
    .okui-datepicker-panel-footer .confirm-button {
        flex: 1 1
    }

    .okui-datepicker-panel-footer .cancel-button {
        min-width: 100px
    }
}

.okui-datepicker-footer {
    align-items: center;
    border-top: 1px solid var(--okd-datepicker-footer-border-color);
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    padding: 20px
}

.okui-datepicker-footer-clear {
    color: var(--okd-datepicker-footer-button-color);
    cursor: pointer;
    font-weight: 500;
    height: 100%
}

.okui-datepicker-footer-confirm {
    color: var(--okd-datepicker-footer-button-color);
    justify-content: space-between;
    padding: 13px 16px
}

.okui-datepicker-footer-confirm .pc-confirm-button {
    margin-left: 12px
}

.okui-datepicker-footer-confirm-desc {
    font-size: 16px
}

.okui-datepicker-footer-confirm-desc .footer-confirm-desc-selected {
    padding-right: 4px
}

.okui-datepicker-footer-confirm-desc .footer-confirm-desc-to {
    padding: 0 4px
}

.okui-datepicker-footer-confirm-mobile {
    padding: 12px 16px
}

.okui-datepicker-footer-confirm-mobile .confirm-button {
    margin-left: 12px
}

@media (max-width:767px) {
    .okui-datepicker-footer-confirm-mobile .confirm-button {
        flex: 1 1
    }

    .okui-datepicker-footer-confirm-mobile .cancel-button {
        min-width: 100px
    }
}

.okui-datepicker-popup {
    display: flex
}

.okui-datepicker-dialog {
    background-color: var(--okd-datepicker-default-background) !important
}

.okui-datepicker-inner {
    min-width: 284px;
    padding-top: 16px
}

.okui-datepicker-board {
    background: var(--okd-datepicker-default-background);
    display: flex;
    flex-direction: column
}

.okui-datepicker-picker-group {
    display: flex;
    flex-direction: column;
    width: -moz-min-content;
    width: min-content
}

.okui-datepicker-picker-group .picker-group-box {
    display: flex;
    position: relative
}

.okui-datepicker-picker-group .picker-group-split-line {
    background-color: var(--okd-color-line-muted);
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    width: 1px
}

.okui-datepicker-picker-group .picker-group-shortcut {
    box-sizing: border-box;
    max-width: 568px;
    padding: 0 16px 26px
}

.okui-datepicker-range-mobile-reference {
    padding: 0 16px
}

.okui-datepicker-shortcut-mobile {
    padding: 0 16px;
    padding: var(--okd-datepicker-shortcut-button-container-padding-horizontal, 0) var(--okd-datepicker-shortcut-button-container-padding-vertical, 16px)
}

.okui-datepicker-range-reference {
    cursor: pointer
}

.okui-datepicker-range-reference .custom-clear-icon {
    color: var(--okd-color-gray-400);
    color: var(--okd-datepicker-input-icon-color, var(--okd-color-gray-400));
    cursor: pointer
}

.okui-datepicker-range-reference-input {
    display: flex
}

.okui-datepicker-range-reference-container {
    align-items: center;
    display: flex;
    flex: 1 1;
    height: 100%;
    position: relative
}

.okui-datepicker-range-reference-container .disabled {
    color: var(--okd-input-disabled-text-color);
    cursor: not-allowed
}

.okui-datepicker-range-reference-place {
    opacity: 0;
    position: absolute;
    z-index: -999999
}

.okui-datepicker-range-reference-item {
    align-items: center;
    display: flex;
    height: 100%;
    width: 100%
}

.okui-datepicker-range-reference-item-input {
    border: none;
    caret-color: var(--okd-datepicker-input-caret-color);
    color: var(--okd-datepicker-default-font-color);
    cursor: pointer;
    height: 100%;
    outline: none;
    width: 100%
}

.okui-datepicker-range-reference-item-input::-webkit-input-placeholder {
    color: var(--okd-datepicker-input-placeholder-color)
}

.okui-datepicker-range-reference-item-input:-moz-placeholder {
    color: var(--okd-datepicker-input-placeholder-color);
    opacity: 1
}

.okui-datepicker-range-reference-item-input::-ms-input-placeholder {
    color: var(--okd-datepicker-input-placeholder-color)
}

.okui-datepicker-range-reference-connection.icon-pointer {
    color: var(--okd-datepicker-day-second-color);
    font-size: 20px;
    margin-right: 8px
}

.okui-datepicker-range-reference-focus {
    border-bottom: 2px solid var(--okd-datepicker-input-border-color);
    margin-bottom: -2px
}

.okui-datepicker-range-reference-input-group {
    justify-content: center;
    margin-top: 20px
}

.okui-datepicker-range-reference-input-group .okui-datepicker-range-reference-item-input {
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    text-align: center;
    width: 100% !important
}

.okui-datepicker-range-reference-input-group .okui-datepicker-range-reference-connection {
    margin: 0 10px
}

.okui-datepicker-range-reference-input-group .okui-datepicker-range-reference-item {
    border: 1px solid var(--okd-color-gray-200);
    border-radius: 4px
}

.okui-datepicker-range-reference-input-group .okui-datepicker-range-reference-focus {
    border: 1px solid var(--okd-datepicker-input-mobile-border-color, var(--okd-color-fq-blue-lv1));
    margin: 0
}

.okui-datepicker-range-reference-xs {
    font-size: var(--okd-datepicker-xs-range-input-font-size)
}

.okui-datepicker-range-reference-sm {
    font-size: var(--okd-datepicker-sm-range-input-font-size)
}

.okui-datepicker-range-reference-md {
    font-size: var(--okd-datepicker-md-range-input-font-size)
}

.okui-datepicker-range-reference-lg {
    font-size: 16px;
    font-size: var(--okd-datepicker-lg-range-input-font-size, 16px)
}

.okui-datepicker-range-reference-xl {
    font-size: 16px;
    font-size: var(--okd-datepicker-xl-range-input-font-size, 16px)
}

.okui-datepicker-range-board {
    background: #fff;
    background: var(--okd-datepicker-range-board-background-color, #fff)
}

.okui-datepicker-shortcut {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: -6px;
    margin-top: 12px;
    margin-top: var(--okd-datepicker-shortcut-margin-top, 12px);
    width: 100%
}

.okui-datepicker-shortcut-button {
    align-items: center;
    background-color: var(--okd-color-background-2);
    background-color: var(--okd-datepicker-shortcut-button-bg-color, var(--okd-color-background-2));
    border-radius: 4px;
    color: var(--okd-datepicker-shortcut-text-default-color);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-size: var(--okd-datepicker-shortcut-button-font-size, 12px);
    font-weight: 500;
    justify-content: center;
    margin-bottom: 8px;
    margin-right: 8px;
    padding: 8px;
    padding: var(--okd-datepicker-shortcut-button-padding-horizontal, 8px) var(--okd-datepicker-shortcut-button-padding-vertical, 8px)
}

.okui-datepicker-shortcut-active {
    background-color: var(--okd-datepicker-shortcut-active-background);
    color: var(--okd-datepicker-shortcut-text-active-color)
}

.okui-datepicker-dateinput-title {
    color: var(--okd-datepicker-dateinput-title-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px
}

.okui-datepicker-dateinput-body {
    align-items: center;
    direction: ltr;
    display: flex;
    justify-content: start
}

.okui-datepicker-dateinput-connector {
    color: var(--okd-datepicker-dateinput-connector-color);
    padding: 0 4px
}

.okui-datepicker-dateinput-input-small {
    width: 48px
}

.okui-datepicker-dateinput-input-large {
    width: 72px
}

.okui-datepicker-dateinput-placeholder {
    color: var(--okd-datepicker-dateinput-placeholder-color);
    font-size: 14px;
    margin-top: 8px
}

.okui-image {
    overflow: hidden;
    position: relative
}

.okui-image,
.okui-image-picture-sizer {
    display: block
}

.okui-image-placeholder {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.okui-image-layout {
    position: absolute
}

.okui-image-layout-responsive {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.okui-image-layout-contain,
.okui-image-layout-cover {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.okui-image-webp {
    display: contents
}

.okui-image-hide {
    visibility: hidden
}

.okui-coach-popover .okui-popup-layer-content {
    padding: 0
}

.okui-coach-popover .okui-popup-layer-arrow-inner {
    background-color: #fff;
    background-color: var(--okd-coachmark-popover-arrow-background-color, #fff);
    border-color: #ebebeb;
    border-color: var(--okd-coachmark-popover-arrow-border-color, #ebebeb)
}

.okui-coach-con {
    background-color: #fff;
    background-color: var(--okd-coachmark-popover-background-color, #fff);
    border: thin solid #ebebeb;
    border: thin solid var(--okd-coachmark-popover-border-color, #ebebeb);
    border-radius: 8px;
    border-radius: var(--okd-coachmark-popover-border-radius, 8px);
    box-shadow: 8px 8px 16px #00000014;
    box-shadow: var(--okd-coachmark-popover-border-shadow, 8px 8px 16px #00000014);
    box-sizing: border-box;
    overflow: hidden;
    padding: 16px;
    padding: var(--okd-coachmark-popover-padding, 16px);
    width: 250px;
    width: var(--okd-coachmark-popover-width, 250px)
}

.okui-coach-con .okui-coach-title {
    align-items: center;
    color: #000;
    color: var(--okd-coachmark-popover-title-color, #000);
    display: flex;
    font-size: 16px;
    font-size: var(--okd-coachmark-popover-title-font-size, 16px);
    font-weight: 700;
    font-weight: var(--okd-coachmark-popover-title-font-weight, 700);
    justify-content: space-between;
    line-height: 20px;
    line-height: var(--okd-coachmark-popover-title-line-height, 20px)
}

.okui-coach-con .okui-coach-title .okui-coach-title-close {
    align-self: flex-start;
    color: #929292;
    color: var(--okd-coachmark-popover-close-color, #929292);
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-size: var(--okd-coachmark-popover-close-font-size, 20px);
    margin-left: 12px;
    margin-left: var(--okd-coachmark-popover-close-margin-left, 12px);
    position: relative;
    vertical-align: middle;
    z-index: 1
}

.okui-coach-con .okui-coach-title+.okui-coach-desc {
    margin-top: 8px;
    margin-top: var(--okd-coachmark-popover-desc-margin-top, 8px)
}

.okui-coach-con .okui-coach-desc {
    color: #000;
    color: var(--okd-coachmark-popover-desc-color, #000);
    font-size: 14px;
    font-size: var(--okd-coachmark-popover-desc-font-size, 14px);
    line-height: 20px;
    line-height: var(--okd-coachmark-popover-desc-line-height, 20px)
}

.okui-coach-con .okui-coach-desc+.okui-coach-footer {
    margin-top: 16px;
    margin-top: var(--okd-coachmark-popover-footer-margin-top, 16px)
}

.okui-coach-con .okui-coach-tour-footer {
    align-items: center;
    color: #929292;
    color: var(--okd-coachmark-tour-footer-color, #929292);
    display: flex;
    font-size: 14px;
    font-size: var(--okd-coachmark-tour-footer-font-size, 14px);
    justify-content: space-between;
    line-height: 16px
}

.okui-coach-con .okui-coach-tour-footer .okui-coach-tour-footer-right {
    align-items: center;
    display: flex
}

.okui-coach-con .okui-coach-tour-footer .okui-coach-tour-footer-confirm {
    margin-left: 8px;
    margin-left: var(--okd-okd-coachmark-tour-footer-margin-left, 8px)
}

.okui-coach-con .okui-coach-tour-footer .okui-coach-tour-footer-button.okui-coach-tour-footer-cancel,
.okui-coach-con .okui-coach-tour-footer .okui-coach-tour-footer-button.okui-coach-tour-footer-confirm {
    min-width: 0;
    min-width: auto
}

.okui-coach-con .okui-coach-standalone-footer {
    display: flex;
    justify-content: flex-end
}

.okui-coach-con .okui-coach-standalone-footer .okui-coach-standalone-footer-button+.okui-coach-standalone-footer-button {
    margin-left: 8px;
    margin-left: var(--okd-okd-coachmark-standalone-footer-margin-left, 8px)
}

@media (min-width:768px) {
    .okui-coach-con {
        max-width: 375px;
        max-width: var(--okd-coachmark-popover-max-width, 375px)
    }
}

.okui-coach-mask {
    color: rgba(0, 0, 0, .65);
    color: var(--okd-coachmark-mask-color, rgba(0, 0, 0, .65));
    inset: 0;
    pointer-events: none;
    position: fixed
}

@keyframes loadingCircle {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.okui-switch {
    background: var(--okd-switch-off-default-track-color);
    border: 0;
    border-radius: calc(var(--okd-switch-md-height)/2);
    box-sizing: border-box;
    cursor: pointer;
    height: var(--okd-switch-md-height);
    outline: none;
    position: relative;
    transition: left .36s;
    vertical-align: middle;
    width: var(--okd-switch-md-width)
}

.okui-switch:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-switch-handler {
    align-items: center;
    background: var(--okd-switch-off-default-handler-color);
    border-radius: 100%;
    box-shadow: var(--okd-switch-off-default-handler-shadow);
    display: flex;
    height: var(--okd-switch-md-handler-size);
    justify-content: center;
    left: calc((var(--okd-switch-md-height) - var(--okd-switch-md-handler-size))/2);
    position: absolute;
    top: calc((var(--okd-switch-md-height) - var(--okd-switch-md-handler-size))/2);
    transition: left .36s;
    width: var(--okd-switch-md-handler-size)
}

.okui-switch .switch-handler-loader {
    height: calc(var(--okd-switch-md-handler-size) - 6px);
    width: calc(var(--okd-switch-md-handler-size) - 6px)
}

.okui-switch .switch-on-loader {
    border-color: var(--okd-switch-on-loading-handler-color);
    border-top-color: var(--okd-switch-on-loading-mark-color)
}

.okui-switch .switch-off-loader {
    border-color: var(--okd-switch-off-loading-handler-color);
    border-top-color: var(--okd-switch-off-loading-mark-color)
}

.okui-switch-label {
    color: var(--okd-switch-label-font-color);
    font-family: inherit;
    font-size: var(--okd-switch-md-label-size);
    font-weight: 500;
    margin-left: 18px;
    vertical-align: middle
}

.okui-switch-small {
    height: var(--okd-switch-sm-height);
    width: var(--okd-switch-sm-width)
}

.okui-switch.okui-switch-small .okui-switch-handler {
    height: var(--okd-switch-sm-handler-size);
    width: var(--okd-switch-sm-handler-size)
}

.okui-switch.okui-switch-small .switch-handler-loader {
    height: calc(var(--okd-switch-sm-handler-size) - 2px);
    width: calc(var(--okd-switch-sm-handler-size) - 2px)
}

.okui-switch-small+.okui-switch-label {
    font-size: var(--okd-switch-sm-label-size)
}

.okui-switch.okui-switch-loading {
    background-color: var(--okd-switch-off-loading-track-color);
    cursor: not-allowed
}

.okui-switch.okui-switch-select {
    background-color: var(--okd-switch-on-default-track-color)
}

.okui-switch.okui-switch-select .okui-switch-handler {
    background: var(--okd-switch-on-default-handler-color);
    box-shadow: var(--okd-switch-on-default-handler-shadow);
    left: calc((var(--okd-switch-md-height) - var(--okd-switch-md-handler-size))/2 + var(--okd-switch-md-width) - (var(--okd-switch-md-height) - var(--okd-switch-md-handler-size))/2*2 - var(--okd-switch-md-handler-size))
}

.okui-switch.okui-switch-select.okui-switch-small .okui-switch-handler {
    left: calc((var(--okd-switch-md-height) - var(--okd-switch-md-handler-size))/2 + var(--okd-switch-sm-width) - (var(--okd-switch-sm-height) - var(--okd-switch-sm-handler-size))/2*2 - var(--okd-switch-sm-handler-size))
}

.okui-switch.okui-switch-select.okui-switch-loading {
    background-color: var(--okd-switch-on-loading-track-color)
}

.okui-switch.okui-switch-disabled {
    background-color: var(--okd-switch-off-disabled-track-color);
    cursor: not-allowed
}

.okui-switch.okui-switch-disabled .okui-switch-handler {
    background: var(--okd-switch-off-disabled-handler-color);
    box-shadow: var(--okd-switch-off-disabled-handler-shadow)
}

.okui-switch.okui-switch-select.okui-switch-disabled {
    background-color: var(--okd-switch-on-disabled-track-color)
}

.okui-switch.okui-switch-select.okui-switch-disabled .okui-switch-handler {
    background: var(--okd-switch-on-disabled-handler-color);
    box-shadow: var(--okd-switch-on-disabled-handler-shadow)
}

.okui-switch-active,
.okui-switch:active {
    box-shadow: var(--okd-switch-on-focus-shadow)
}

.okui-switch-theme-icon.add-weight {
    color: var(--okd-color-content-primary);
    color: var(--okd-switch-theme-icon-color, var(--okd-color-content-primary));
    font-size: 12px
}

.okui-drawer {
    background: var(--okd-drawer-content-bg);
    outline: none;
    padding: 0 16px;
    width: 320px;
    z-index: 9600
}

.okui-drawer.no-padding {
    padding: 0
}

.okui-drawer-mask {
    background: var(--okd-drawer-mask-color);
    z-index: 9600
}

.okui-drawer-right {
    box-shadow: -6px 0 16px 0 rgba(0, 0, 0, .08), -3px 0 6px -4px rgba(0, 0, 0, .12), -9px 0 28px 8px rgba(0, 0, 0, .05);
    box-shadow: var(--okd-drawer-mask-right-box-shadow, -6px 0 16px 0 rgba(0, 0, 0, .08), -3px 0 6px -4px rgba(0, 0, 0, .12), -9px 0 28px 8px rgba(0, 0, 0, .05))
}

.okui-drawer-left {
    box-shadow: 6px 0 16px 0 rgba(0, 0, 0, .08), 3px 0 6px -4px rgba(0, 0, 0, .12), 9px 0 28px 8px rgba(0, 0, 0, .05);
    box-shadow: var(--okd-drawer-mask-left-box-shadow, 6px 0 16px 0 rgba(0, 0, 0, .08), 3px 0 6px -4px rgba(0, 0, 0, .12), 9px 0 28px 8px rgba(0, 0, 0, .05))
}

.okui-dropzone {
    cursor: pointer;
    width: 100%
}

.okui-dropzone-focus {
    border-radius: 4px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-dropzone-contents {
    display: contents
}

.okui-dropzone-area {
    align-items: center;
    background-color: transparent;
    background-color: var(--okd-upload-default-background-color, transparent);
    border: 2px dashed #dbdbdb;
    border: 2px dashed var(--okd-upload-default-border-color, #dbdbdb);
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;
    justify-content: center;
    position: relative;
    transition: all .3s;
    width: 100%
}

.okui-dropzone-status-area {
    display: contents
}

.okui-dropzone-input-file {
    display: block
}

.okui-dropzone-preview-dialog {
    padding-top: 0
}

.okui-dropzone {
    display: inline-flex;
    flex-direction: column
}

.okui-dropzone:hover .okui-dropzone-preview-mask {
    background: rgba(0, 0, 0, .4);
    opacity: 1
}

.okui-dropzone:focus-within .preview-focus {
    background: rgba(0, 0, 0, .4);
    opacity: 1
}

.okui-dropzone-status-box {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%
}

.okui-dropzone-text-btn {
    color: var(--okd-upload-text-btn-color);
    text-decoration: underline
}

.okui-dropzone-logo {
    color: #dbdbdb;
    color: var(--okd-upload-default-logo-color, #dbdbdb)
}

.okui-dropzone-icon-url {
    margin-bottom: 12px;
    width: 64px
}

.okui-dropzone-loader {
    margin-bottom: 12px
}

.okui-dropzone-preview {
    align-items: center;
    box-sizing: border-box;
    cursor: auto;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 8px;
    width: 100%
}

.okui-dropzone-preview-img {
    height: 100%;
    width: 100%
}

.okui-dropzone-preview-mask {
    bottom: 8px;
    left: 8px;
    opacity: 0;
    position: absolute;
    right: 8px;
    text-align: center;
    top: 8px;
    transition: all .3s;
    visibility: visible
}

.okui-dropzone-preview-icon {
    display: flex;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.okui-dropzone-preview-mask .icon-box+.icon-box {
    margin-left: 40px
}

.okui-dropzone-preview-mask .icon-box {
    color: #fff;
    color: var(--okd-upload-default-icon-color, #fff);
    cursor: pointer;
    font-size: 30px
}

.okui-dropzone-title {
    color: #929292;
    color: var(--okd-upload-default-label-color, #929292);
    font-size: var(--okd-upload-pc-label-font-size);
    font-weight: 500;
    line-height: var(--okd-upload-pc-label-line-height);
    margin-bottom: 8px;
    padding: 0 10px;
    text-align: center
}

.okui-dropzone-label {
    padding-left: 8px
}

.okui-dropzone-desc {
    box-sizing: border-box;
    color: #929292;
    color: var(--okd-upload-default-desc-color, #929292);
    font-size: var(--okd-upload-pc-desc-font-size);
    font-weight: 400;
    line-height: var(--okd-upload-pc-desc-line-height);
    max-width: 100%;
    overflow: hidden;
    padding: 0 1em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: break-spaces
}

.okui-dropzone-active .okui-dropzone-area {
    background-color: var(--okd-upload-active-background-color);
    border-color: var(--okd-upload-active-border-color)
}

.okui-dropzone-active .okui-dropzone-title {
    color: var(--okd-upload-active-label-color)
}

.okui-dropzone-active .okui-dropzone-desc {
    display: none
}

.okui-dropzone-area .okui-dropzone-logo {
    font-size: 48px
}

.okui-dropzone-active .okui-dropzone-logo {
    color: var(--okd-upload-active-logo-color)
}

.okui-dropzone-error .okui-dropzone-area {
    background-color: var(--okd-upload-error-background-color);
    border-color: var(--okd-upload-error-border-color)
}

.okui-dropzone-error .okui-dropzone-title {
    color: var(--okd-upload-error-label-color)
}

.okui-dropzone-error .okui-dropzone-logo {
    color: var(--okd-upload-error-logo-color)
}

.okui-dropzone-error .okui-dropzone-retry {
    color: var(--okd-upload-error-retry-text-color);
    cursor: pointer
}

.okui-dropzone-success .okui-dropzone-area {
    border-color: var(--okd-upload-success-border-color);
    border-style: solid
}

.okui-dropzone-success .okui-dropzone-logo {
    color: var(--okd-upload-success-logo-color)
}

.okui-dropzone-uploading .okui-dropzone-area {
    border-style: solid
}

.okui-dropzone-disabled {
    cursor: not-allowed
}

.okui-dropzone-disabled .okui-dropzone-logo {
    color: var(--okd-upload-default-logo-color);
    color: var(--okd-upload-disabled-logo-color, var(--okd-upload-default-logo-color))
}

.okui-dropzone-disabled .okui-dropzone-title {
    color: var(--okd-upload-default-label-color);
    color: var(--okd-upload-disabled-label-color, var(--okd-upload-default-label-color))
}

.okui-dropzone-disabled .okui-dropzone-desc {
    color: var(--okd-upload-default-desc-color);
    color: var(--okd-upload-disabled-desc-color, var(--okd-upload-default-desc-color))
}

.okui-dropzone-disabled .okui-dropzone-area {
    background-color: #f9f9f9;
    background-color: var(--okd-upload-disabled-background, #f9f9f9);
    border-color: #ced3de;
    border-color: var(--okd-upload-disabled-border-color, #ced3de);
    border-style: solid
}

@media (max-width:767px) {
    .okui-dropzone-title {
        align-items: center;
        display: flex;
        flex-direction: column;
        font-size: var(--okd-upload-mobile-label-font-size);
        line-height: var(--okd-upload-mobile-label-line-height);
        margin-bottom: 0
    }

    .okui-dropzone-title .okui-dropzone-label {
        display: none
    }

    .okui-dropzone-desc {
        font-size: var(--okd-upload-mobile-desc-font-size);
        line-height: var(--okd-upload-mobile-desc-line-height);
        white-space: nowrap
    }

    .okui-dropzone-area .okui-dropzone-logo {
        font-size: 32px
    }

    .okui-dropzone-logo.okui-dropzone-logo-xl {
        display: none
    }

    .okui-dropzone-logo.okui-dropzone-logo-md {
        display: inline;
        display: initial
    }
}

.okui-dropzone-preview-picture {
    display: block;
    margin: 0 auto;
    max-height: 80vh;
    max-width: 70vw
}

.okui-dropzone-preview-picture-sm {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.okui-dropzone-patch-mobile {
    display: flex;
    flex-wrap: wrap;
    margin-right: -8px
}

.okui-dropzone-patch-mobile-entry {
    height: 100px;
    margin-right: 8px;
    width: 100px
}

.okui-dropzone-patch-mobile-entry .okui-dropzone-patch-mobile-entry-icon {
    font-size: 32px
}

.okui-dropzone-patch-mobile-entry-disabled {
    cursor: not-allowed
}

.okui-dropzone-patch-mobile-block {
    align-items: center;
    background: #f9f9f9;
    background: var(--okd-upload-patch-item-background, #f9f9f9);
    border: 1px solid #ebebeb;
    border: 1px solid var(--okd-upload-patch-item-mobile-default-border-color, #ebebeb);
    border-radius: 4px;
    box-sizing: border-box;
    color: #929292;
    color: var(--okd-upload-patch-item-desc-color, #929292);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    height: 100px;
    justify-content: center;
    margin-bottom: 8px;
    margin-right: 8px;
    padding: 4px;
    position: relative;
    width: 100px
}

.okui-dropzone-patch-mobile-uploading {
    border-color: #ebebeb;
    border-color: var(--okd-upload-patch-item-mobile-active-border-color, #ebebeb)
}

.okui-dropzone-patch-mobile-success {
    border-color: #ebebeb;
    border-color: var(--okd-upload-patch-item-mobile-success-border-color, #ebebeb)
}

.okui-dropzone-patch-mobile-error {
    border-color: #ebebeb;
    border-color: var(--okd-upload-patch-item-mobile-error-border-color, #ebebeb)
}

.okui-dropzone-patch-mobile-img {
    cursor: pointer;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.okui-dropzone-patch-mobile-img .placeholder-icon {
    color: #dbdbdb;
    color: var(--okd-upload-patch-item-placeholder-icon-color, #dbdbdb);
    font-size: 36px
}

.okui-dropzone-patch-mobile-content {
    display: flex;
    flex-direction: column
}

.okui-dropzone-patch-mobile-gap {
    margin-bottom: 4px
}

.okui-dropzone-patch-mobile-loader {
    height: 16px;
    width: 16px
}

.okui-dropzone-patch-mobile .okui-dropzone-patch-mobile-icon-success {
    color: #05c28c;
    color: var(--okd-upload-patch-item-success-icon-color, #05c28c);
    font-size: 24px
}

.okui-dropzone-patch-mobile .okui-dropzone-patch-mobile-icon-error {
    color: #e3493f;
    color: var(--okd-upload-patch-item-error-icon-color, #e3493f);
    font-size: 24px
}

.okui-dropzone-patch-mobile-retry {
    color: #0569ff;
    color: var(--okd-upload-patch-item-retry-text-color, #0569ff);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px
}

.okui-dropzone-patch-mobile .okui-dropzone-patch-mobile-remove {
    color: #000;
    color: var(--okd-upload-patch-item-mobile-remove-icon-color, #000);
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%)
}

.okui-dropzone-patch {
    width: 100%
}

.okui-dropzone-patch-file-number {
    color: #000;
    color: var(--okd-upload-patch-tip-color, #000);
    margin-top: 12px
}

.okui-dropzone-patch-entry {
    width: 100%
}

.okui-dropzone-patch-entry .okui-dropzone-patch-entry-icon {
    font-size: 48px
}

.okui-dropzone-patch-entry-disabled {
    cursor: not-allowed
}

@media (max-width:767px) {
    .okui-dropzone-patch-file-number {
        display: none
    }
}

.okui-dropzone-patch-dialog {
    padding-top: 0
}

.okui-dropzone-patch-dialog-top {
    height: 0
}

.okui-dropzone-patch-preview {
    display: block;
    margin: 0 auto;
    max-height: 80vh;
    max-width: 70vw
}

.okui-dropzone-simple-weight.okui-dropzone-simple {
    height: 100px;
    width: 100px
}

.okui-dropzone-simple-weight.okui-dropzone-simple .okui-dropzone-desc,
.okui-dropzone-simple-weight.okui-dropzone-simple .okui-dropzone-title {
    display: none
}

.okui-dropzone-simple-weight.okui-dropzone-simple .okui-dropzone-loader {
    margin-bottom: 0
}

.okui-dropzone-simple-weight.okui-dropzone-simple .okui-dropzone-area .okui-dropzone-logo {
    font-size: 40px
}

.okui-dropzone-simple-weight.okui-dropzone-simple .okui-dropzone-preview-mask .okui-dropzone-icon-delete {
    font-size: 24px
}

.okui-dropzone-simple-weight.okui-dropzone-simple .okui-dropzone-preview-mask .icon-box+.icon-box {
    margin-left: 12px
}

.okui-dropzone-simple-weight.okui-dropzone-simple .okui-dropzone-preview-mask .okui-dropzone-icon-zoomin {
    font-size: 24px
}

.okui-dropzone-simple-weight.okui-dropzone-simple .simple-container {
    width: 100%
}

.okui-dropzone-simple-error {
    color: var(--okd-upload-error-label-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-top: 4px;
    max-width: 100px
}

.okui-dropzone-simple-try-again {
    color: var(--okd-upload-error-retry-text-color);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-left: 4px
}

.okui-a11y-selection {
    display: none
}

.okui-selection-chips {
    align-items: center;
    background: var(--okd-color-background-surface-primary);
    background: var(--okd-selectionchips-default-background, var(--okd-color-background-surface-primary));
    border: 1px solid transparent;
    box-sizing: border-box;
    color: var(--okd-color-content-primary);
    color: var(--okd-selectionchips-default-font-color, var(--okd-color-content-primary));
    cursor: pointer;
    display: flex;
    justify-content: center;
    text-align: center
}

.okui-selection-chips.hover,
.okui-selection-chips:not(.okui-selection-chips-disabled):not(.okui-selection-chips-focus):hover {
    background: var(--okd-color-background-surface-primary);
    background: var(--okd-selectionchips-hover-background, var(--okd-color-background-surface-primary));
    color: var(--okd-color-content-primary);
    color: var(--okd-selectionchips-hover-font-color, var(--okd-color-content-primary))
}

.okui-selection-chips.active,
.okui-selection-chips:not(.okui-selection-chips-disabled):active {
    background: var(--okd-color-background-surface-pressed);
    background: var(--okd-selectionchips-active-background, var(--okd-color-background-surface-pressed));
    color: var(--okd-color-content-primary);
    color: var(--okd-selectionchips-active-font-color, var(--okd-color-content-primary))
}

.okui-selection-chips.active,
.okui-selection-chips.focus,
.okui-selection-chips:not(.okui-selection-chips-disabled).okui-selection-chips-focus,
.okui-selection-chips:not(.okui-selection-chips-disabled):active {
    border-color: var(--okd-selectionchips-focus-border-color, var(--okd-color-border-selected))
}

.okui-selection-chips.disabled,
.okui-selection-chips.okui-selection-chips-disabled {
    background: var(--okd-color-background-surface-disable);
    background: var(--okd-selectionchips-disabled-background, var(--okd-color-background-surface-disable));
    color: var(--okd-color-content-disabled);
    color: var(--okd-selectionchips-disabled-font-color, var(--okd-color-content-disabled));
    cursor: not-allowed
}

.okui-selection-chips.okui-selection-chips-md {
    border-radius: 8px;
    border-radius: var(--okd-selectionchips-md-border-radius, 8px);
    font-size: 14px;
    font-size: var(--okd-selectionchips-md-font-size, 14px);
    font-weight: 400;
    font-weight: var(--okd-selectionchips-md-font-weight, 400);
    line-height: 16px;
    line-height: var(--okd-selectionchips-md-line-height, 16px);
    min-height: 36px;
    min-height: var(--okd-selectionchips-md-min-height, 36px);
    min-width: 32px;
    min-width: var(--okd-selectionchips-md-min-width, 32px);
    padding: 8px;
    padding: var(--okd-selectionchips-md-padding-vertical, 8px) var(--okd-selectionchips-md-padding-horizontal, 8px)
}

.okui-selection-chips.okui-selection-chips-lg {
    border-radius: 8px;
    border-radius: var(--okd-selectionchips-lg-border-radius, 8px);
    font-size: 14px;
    font-size: var(--okd-selectionchips-lg-font-size, 14px);
    font-weight: 400;
    font-weight: var(--okd-selectionchips-lg-font-weight, 400);
    line-height: 16px;
    line-height: var(--okd-selectionchips-lg-line-height, 16px);
    min-height: 40px;
    min-height: var(--okd-selectionchips-lg-min-height, 40px);
    min-width: 32px;
    min-width: var(--okd-selectionchips-lg-min-width, 32px);
    padding: 8px;
    padding: var(--okd-selectionchips-lg-padding-vertical, 8px) var(--okd-selectionchips-lg-padding-horizontal, 8px)
}

.okui-selection-chips-truncate {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden
}

.okui-selection-chips-group {
    display: flex;
    gap: 8px;
    gap: var(--okd-selectionchips-group-margin-right, 8px)
}

.okui-selection-chips-group .okui-selection-chips .okui-selection-chips-truncate {
    -webkit-line-clamp: 3
}

.okui-skeleton {
    display: flex;
    width: 100%
}

.okui-skeleton-header {
    display: flex;
    margin-right: 24px
}

.okui-skeleton-content {
    flex-grow: 1
}

.okui-skeleton-avatar {
    background-color: var(--okd-color-background-2);
    background-color: var(--okd-skeleton-background-color, var(--okd-color-background-2))
}

.okui-skeleton-avatar.okui-skeleton-avatar-animate {
    animation: okui-skeleton-loading 1.4s ease infinite;
    background: linear-gradient(90deg, var(--okd-color-background-2) 25%, hsla(0, 0%, 98%, .1) 37%, var(--okd-color-background-2) 63%);
    background: linear-gradient(90deg, var(--okd-skeleton-background-color, var(--okd-color-background-2)) 25%, var(--okd-skeleton-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--okd-skeleton-background-color, var(--okd-color-background-2)) 63%);
    background-size: 400% 100%;
    content: ""
}

.okui-skeleton-avatar-sm {
    height: 24px;
    height: var(--okd-skeleton-avatar-sm-width, 24px);
    width: 24px;
    width: var(--okd-skeleton-avatar-sm-width, 24px)
}

.okui-skeleton-avatar-md {
    height: 64px;
    height: var(--okd-skeleton-avatar-md-width, 64px);
    width: 64px;
    width: var(--okd-skeleton-avatar-md-width, 64px)
}

.okui-skeleton-avatar-lg {
    height: 128px;
    height: var(--okd-skeleton-avatar-lg-width, 128px);
    width: 128px;
    width: var(--okd-skeleton-avatar-lg-width, 128px)
}

.okui-skeleton-avatar-circle {
    border-radius: 50%
}

.okui-skeleton-input {
    background-color: var(--okd-color-background-2);
    background-color: var(--okd-skeleton-background-color, var(--okd-color-background-2));
    border-radius: 4px;
    border-radius: var(--okd-skeleton-input-border-radius, 4px)
}

.okui-skeleton-input.okui-skeleton-input-animate {
    animation: okui-skeleton-loading 1.4s ease infinite;
    background: linear-gradient(90deg, var(--okd-color-background-2) 25%, hsla(0, 0%, 98%, .1) 37%, var(--okd-color-background-2) 63%);
    background: linear-gradient(90deg, var(--okd-skeleton-background-color, var(--okd-color-background-2)) 25%, var(--okd-skeleton-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--okd-skeleton-background-color, var(--okd-color-background-2)) 63%);
    background-size: 400% 100%;
    content: ""
}

.okui-skeleton-input-sm {
    height: 24px;
    height: var(--okd-skeleton-input-sm-height, 24px)
}

.okui-skeleton-input-md {
    height: 40px;
    height: var(--okd-skeleton-input-md-height, 40px)
}

.okui-skeleton-paragraph-row {
    background-color: var(--okd-color-background-2);
    background-color: var(--okd-skeleton-background-color, var(--okd-color-background-2));
    border-radius: 4px;
    border-radius: var(--okd-skeleton-input-border-radius, 4px)
}

.okui-skeleton-paragraph-row.okui-skeleton-paragraph-animate {
    animation: okui-skeleton-loading 1.4s ease infinite;
    background: linear-gradient(90deg, var(--okd-color-background-2) 25%, hsla(0, 0%, 98%, .1) 37%, var(--okd-color-background-2) 63%);
    background: linear-gradient(90deg, var(--okd-skeleton-background-color, var(--okd-color-background-2)) 25%, var(--okd-skeleton-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--okd-skeleton-background-color, var(--okd-color-background-2)) 63%);
    background-size: 400% 100%;
    content: ""
}

.okui-skeleton-paragraph-row+.okui-skeleton-paragraph-row {
    margin-top: 20px
}

.okui-skeleton-paragraph-sm {
    height: 24px;
    height: var(--okd-skeleton-input-sm-height, 24px)
}

.okui-skeleton-paragraph-md {
    height: 40px;
    height: var(--okd-skeleton-input-md-height, 40px)
}

@keyframes okui-skeleton-loading {
    0% {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

.okui-hyperlink-xs .okui-hyperlink-text {
    font-size: var(--okd-hyperlink-xs-font-size);
    line-height: var(--okd-hyperlink-xs-line-height)
}

.okui-hyperlink-xs .icon-arrow,
.okui-hyperlink-xs .icon-jump {
    font-size: var(--okd-hyperlink-xs-icon-font-size)
}

.okui-hyperlink-xs .icon-jump {
    margin-left: var(--okd-hyperlink-xs-icon-margin-left)
}

.okui-hyperlink-sm .okui-hyperlink-text {
    font-size: var(--okd-hyperlink-sm-font-size);
    line-height: var(--okd-hyperlink-sm-line-height)
}

.okui-hyperlink-sm .icon-arrow,
.okui-hyperlink-sm .icon-jump {
    font-size: var(--okd-hyperlink-sm-icon-font-size)
}

.okui-hyperlink-sm .icon-jump {
    margin-left: var(--okd-hyperlink-sm-icon-margin-left)
}

.okui-hyperlink-md .okui-hyperlink-text {
    font-size: var(--okd-hyperlink-md-font-size);
    line-height: var(--okd-hyperlink-md-line-height)
}

.okui-hyperlink-md .icon-arrow,
.okui-hyperlink-md .icon-jump {
    font-size: var(--okd-hyperlink-md-icon-font-size)
}

.okui-hyperlink-md .icon-jump {
    margin-left: var(--okd-hyperlink-md-icon-margin-left)
}

.okui-hyperlink-lg .okui-hyperlink-text {
    font-size: var(--okd-hyperlink-lg-font-size);
    line-height: var(--okd-hyperlink-lg-line-height)
}

.okui-hyperlink-lg .icon-arrow,
.okui-hyperlink-lg .icon-jump {
    font-size: var(--okd-hyperlink-lg-icon-font-size)
}

.okui-hyperlink-lg .icon-jump {
    margin-left: var(--okd-hyperlink-lg-icon-margin-left)
}

.okui-hyperlink-muted {
    font-weight: var(--okd-hyperlink-muted-font-weight)
}

.okui-hyperlink-muted:hover {
    font-weight: var(--okd-hyperlink-muted-hover-font-weight)
}

.okui-hyperlink-medium {
    font-weight: var(--okd-hyperlink-medium-font-weight)
}

.okui-hyperlink-medium:hover {
    font-weight: var(--okd-hyperlink-medium-hover-font-weight)
}

.okui-hyperlink-amplified {
    font-weight: var(--okd-hyperlink-amplified-font-weight)
}

.okui-hyperlink-amplified:hover {
    font-weight: var(--okd-hyperlink-amplified-hover-font-weight)
}

.okui-hyperlink-primary {
    color: var(--okd-hyperlink-primary-default-color)
}

.okui-hyperlink-primary .icon-arrow,
.okui-hyperlink-primary .icon-jump {
    color: var(--okd-hyperlink-primary-default-icon-color)
}

.okui-hyperlink-primary.okui-hyperlink-disabled {
    color: var(--okd-hyperlink-primary-disabled-color)
}

.okui-hyperlink-primary.okui-hyperlink-disabled .icon-arrow,
.okui-hyperlink-primary.okui-hyperlink-disabled .icon-jump,
.okui-hyperlink-primary.okui-hyperlink-disabled .okui-hyperlink-text {
    color: var(--okd-hyperlink-primary-disabled-color);
    cursor: not-allowed
}

.okui-hyperlink-primary:not(.okui-hyperlink-disabled):hover {
    color: var(--okd-hyperlink-primary-hover-color)
}

.okui-hyperlink-primary:not(.okui-hyperlink-disabled):hover .okui-hyperlink-text {
    color: var(--okd-hyperlink-primary-hover-color);
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-primary:not(.okui-hyperlink-disabled):hover .icon-arrow,
.okui-hyperlink-primary:not(.okui-hyperlink-disabled):hover .icon-jump {
    color: var(--okd-hyperlink-primary-hover-icon-color)
}

.okui-hyperlink-primary a,
.okui-hyperlink-primary a:active,
.okui-hyperlink-primary a:visited {
    color: var(--okd-hyperlink-primary-default-color)
}

.okui-hyperlink-secondary {
    color: var(--okd-hyperlink-secondary-default-color)
}

.okui-hyperlink-secondary .icon-arrow,
.okui-hyperlink-secondary .icon-jump {
    color: var(--okd-hyperlink-secondary-default-icon-color)
}

.okui-hyperlink-secondary.okui-hyperlink-disabled {
    color: var(--okd-hyperlink-secondary-disabled-color)
}

.okui-hyperlink-secondary.okui-hyperlink-disabled .icon-arrow,
.okui-hyperlink-secondary.okui-hyperlink-disabled .icon-jump,
.okui-hyperlink-secondary.okui-hyperlink-disabled .okui-hyperlink-text {
    color: var(--okd-hyperlink-secondary-disabled-color);
    cursor: not-allowed
}

.okui-hyperlink-secondary:not(.okui-hyperlink-disabled):hover {
    color: var(--okd-hyperlink-secondary-hover-color)
}

.okui-hyperlink-secondary:not(.okui-hyperlink-disabled):hover .okui-hyperlink-text {
    color: var(--okd-hyperlink-secondary-hover-color);
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-secondary:not(.okui-hyperlink-disabled):hover .icon-arrow,
.okui-hyperlink-secondary:not(.okui-hyperlink-disabled):hover .icon-jump {
    color: var(--okd-hyperlink-secondary-hover-icon-color)
}

.okui-hyperlink-secondary a,
.okui-hyperlink-secondary a:active,
.okui-hyperlink-secondary a:visited {
    color: var(--okd-hyperlink-secondary-default-color)
}

.okui-hyperlink-reversed {
    color: var(--okd-hyperlink-reversed-default-color)
}

.okui-hyperlink-reversed .icon-arrow,
.okui-hyperlink-reversed .icon-jump {
    color: var(--okd-hyperlink-reversed-default-icon-color)
}

.okui-hyperlink-reversed.okui-hyperlink-disabled {
    color: var(--okd-hyperlink-reversed-disabled-color)
}

.okui-hyperlink-reversed.okui-hyperlink-disabled .icon-arrow,
.okui-hyperlink-reversed.okui-hyperlink-disabled .icon-jump,
.okui-hyperlink-reversed.okui-hyperlink-disabled .okui-hyperlink-text {
    color: var(--okd-hyperlink-reversed-disabled-color);
    cursor: not-allowed
}

.okui-hyperlink-reversed:not(.okui-hyperlink-disabled):hover {
    color: var(--okd-hyperlink-reversed-hover-color)
}

.okui-hyperlink-reversed:not(.okui-hyperlink-disabled):hover .okui-hyperlink-text {
    color: var(--okd-hyperlink-reversed-hover-color);
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-reversed:not(.okui-hyperlink-disabled):hover .icon-arrow,
.okui-hyperlink-reversed:not(.okui-hyperlink-disabled):hover .icon-jump {
    color: var(--okd-hyperlink-reversed-hover-icon-color)
}

.okui-hyperlink-reversed a,
.okui-hyperlink-reversed a:active,
.okui-hyperlink-reversed a:visited {
    color: var(--okd-hyperlink-reversed-default-color)
}

.okui-hyperlink-accent {
    color: var(--okd-hyperlink-accent-default-color)
}

.okui-hyperlink-accent .icon-arrow,
.okui-hyperlink-accent .icon-jump {
    color: var(--okd-hyperlink-accent-default-icon-color)
}

.okui-hyperlink-accent.okui-hyperlink-disabled {
    color: var(--okd-hyperlink-accent-disabled-color)
}

.okui-hyperlink-accent.okui-hyperlink-disabled .icon-arrow,
.okui-hyperlink-accent.okui-hyperlink-disabled .icon-jump,
.okui-hyperlink-accent.okui-hyperlink-disabled .okui-hyperlink-text {
    color: var(--okd-hyperlink-accent-disabled-color);
    cursor: not-allowed
}

.okui-hyperlink-accent:not(.okui-hyperlink-disabled):hover {
    color: var(--okd-hyperlink-accent-hover-color)
}

.okui-hyperlink-accent:not(.okui-hyperlink-disabled):hover .okui-hyperlink-text {
    color: var(--okd-hyperlink-accent-hover-color);
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-accent:not(.okui-hyperlink-disabled):hover .icon-arrow,
.okui-hyperlink-accent:not(.okui-hyperlink-disabled):hover .icon-jump {
    color: var(--okd-hyperlink-accent-hover-icon-color)
}

.okui-hyperlink-accent a,
.okui-hyperlink-accent a:active,
.okui-hyperlink-accent a:visited {
    color: var(--okd-hyperlink-accent-default-color)
}

.okui-hyperlink-text {
    text-decoration: none
}

.okui-hyperlink-underline .okui-hyperlink-text {
    text-decoration: underline;
    text-underline-offset: 3px
}

.okui-hyperlink-no-hover-underline:not(.okui-hyperlink-disabled):hover .okui-hyperlink-text {
    text-decoration: none
}

.okui-hyperlink {
    align-items: center;
    cursor: pointer;
    display: inline-flex
}

.okui-hyperlink .icon-arrow,
.okui-hyperlink .icon-jump {
    cursor: auto;
    font-weight: inherit
}

.okui-hyperlink a:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-skeleton-avatar-reversed {
    background-color: var(--okd-color-gray-700);
    background-color: var(--okd-skeleton-reversed-background-color, var(--okd-color-gray-700))
}

.okui-skeleton-avatar-reversed.okui-skeleton-avatar-animate {
    background: linear-gradient(90deg, var(--okd-color-gray-700) 25%, hsla(0, 0%, 98%, .1) 37%, var(--okd-color-gray-700) 63%);
    background: linear-gradient(90deg, var(--okd-skeleton-reversed-background-color, var(--okd-color-gray-700)) 25%, var(--okd-skeleton-reversed-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--okd-skeleton-reversed-background-color, var(--okd-color-gray-700)) 63%);
    background-size: 400% 100%
}

.okui-skeleton-input-reversed {
    background-color: var(--okd-color-gray-700);
    background-color: var(--okd-skeleton-reversed-background-color, var(--okd-color-gray-700))
}

.okui-skeleton-input-reversed.okui-skeleton-input-animate {
    background: linear-gradient(90deg, var(--okd-color-gray-700) 25%, hsla(0, 0%, 98%, .1) 37%, var(--okd-color-gray-700) 63%);
    background: linear-gradient(90deg, var(--okd-skeleton-reversed-background-color, var(--okd-color-gray-700)) 25%, var(--okd-skeleton-reversed-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--okd-skeleton-reversed-background-color, var(--okd-color-gray-700)) 63%);
    background-size: 400% 100%
}

.okui-skeleton-paragraph-reversed>.okui-skeleton-paragraph-row {
    background-color: var(--okd-color-gray-700);
    background-color: var(--okd-skeleton-reversed-background-color, var(--okd-color-gray-700))
}

.okui-skeleton-paragraph-reversed>.okui-skeleton-paragraph-row.okui-skeleton-paragraph-animate {
    background: linear-gradient(90deg, var(--okd-color-gray-700) 25%, hsla(0, 0%, 98%, .1) 37%, var(--okd-color-gray-700) 63%);
    background: linear-gradient(90deg, var(--okd-skeleton-reversed-background-color, var(--okd-color-gray-700)) 25%, var(--okd-skeleton-reversed-active-background-color, hsla(0, 0%, 98%, .1)) 37%, var(--okd-skeleton-reversed-background-color, var(--okd-color-gray-700)) 63%);
    background-size: 400% 100%
}

.okui-qrcode {
    background-color: #fff;
    border-radius: 8px;
    box-sizing: content-box;
    box-sizing: initial;
    display: inline-flex;
    position: relative
}

.okui-qrcode-mask {
    align-items: center;
    background-color: hsla(0, 0%, 100%, .9);
    border-radius: 8px;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.okui-dropdown-option {
    white-space: nowrap
}

.okui-radio-inner {
    background-color: var(--okd-radio-default-background);
    border: 1px solid var(--okd-radio-default-border-color);
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    direction: ltr;
    display: block;
    left: 0;
    margin-top: 1px;
    position: relative;
    top: 0
}

.okui-radio-input {
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 1
}

.okui-radio-input:focus-visible {
    border-radius: 50%;
    opacity: 1;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-radio-children {
    cursor: pointer;
    display: inline-block;
    font-size: var(--okd-radio-common-label-font-size);
    margin-left: 4px;
    vertical-align: top;
    white-space: normal;
    word-break: break-word
}

.okui-radio-wrapper {
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    margin-right: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap
}

.okui-radio-wrapper .okui-radio {
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle
}

.okui-radio-wrapper .okui-radio-children {
    color: var(--okd-radio-default-text-color)
}

.okui-radio-wrapper.hover-status .okui-radio-inner {
    border-color: var(--okd-radio-default-hover-border-color);
    box-shadow: var(--okd-radio-default-hover-shadow)
}

.okui-radio-wrapper-checked .okui-radio-children {
    color: var(--okd-radio-selected-text-color)
}

.okui-radio-wrapper-checked .okui-radio-inner {
    background-color: var(--okd-radio-selected-background);
    border-color: var(--okd-radio-selected-border-color)
}

.okui-radio-wrapper-checked .okui-radio-inner:after {
    background-color: var(--okd-radio-selected-inner-color);
    border: 2px solid var(--okd-radio-selected-inner-color);
    border-left: 0;
    border-radius: 50%;
    border-top: 0;
    box-sizing: border-box;
    content: " ";
    height: 6px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: all .2s cubic-bezier(.12, .4, .29, 1.46) .1s;
    width: 6px
}

.okui-radio-wrapper-error .okui-radio-children {
    color: var(--okd-radio-error-text-color)
}

.okui-radio-wrapper-error .okui-radio-inner {
    border-color: var(--okd-radio-error-border-color)
}

.okui-radio-wrapper-error.hover-status .okui-radio-inner {
    border-color: var(--okd-radio-error-hover-border-color);
    box-shadow: var(--okd-radio-error-hover-shadow)
}

.okui-radio-wrapper-error.okui-radio-wrapper-checked .okui-radio-inner {
    background-color: var(--okd-radio-error-background);
    border-color: var(--okd-radio-error-border-color)
}

.okui-radio-wrapper-error.okui-radio-wrapper-checked .okui-radio-inner:after {
    background: var(--okd-radio-error-inner-color);
    border-color: var(--okd-radio-error-inner-color)
}

.okui-radio-wrapper-disabled {
    cursor: not-allowed
}

.okui-radio-wrapper-disabled .okui-radio-children {
    color: var(--okd-radio-disabled-text-color);
    cursor: not-allowed
}

.okui-radio-wrapper-disabled .okui-radio,
.okui-radio-wrapper-disabled .okui-radio .okui-radio-input {
    cursor: default
}

.okui-radio-wrapper-disabled .okui-radio .okui-radio-inner {
    background-color: var(--okd-radio-disabled-background);
    border-color: var(--okd-radio-disabled-border-color);
    cursor: default
}

.okui-radio-wrapper-disabled.hover-status .okui-radio-inner {
    border-color: var(--okd-radio-disabled-hover-border-color);
    box-shadow: none
}

.okui-radio-wrapper-disabled.okui-radio-wrapper-checked .okui-radio-inner {
    border-color: var(--okd-radio-disabled-checked-border-color)
}

.okui-radio-wrapper-disabled.okui-radio-wrapper-checked .okui-radio-inner:after {
    background-color: var(--okd-radio-disabled-checked-inner-color);
    border-color: var(--okd-radio-disabled-inner-color)
}

.okui-radio-sm .okui-radio-inner {
    height: var(--okd-radio-sm-height);
    width: var(--okd-radio-sm-width)
}

.okui-radio-sm .okui-radio-children {
    font-size: var(--okd-radio-sm-font-size);
    margin-left: var(--okd-radio-sm-margin)
}

.okui-radio-sm.okui-radio-wrapper {
    line-height: var(--okd-radio-sm-line-height);
    padding-bottom: var(--okd-radio-sm-padding);
    padding-top: var(--okd-radio-sm-padding)
}

.okui-radio-md .okui-radio-inner {
    height: var(--okd-radio-md-height);
    width: var(--okd-radio-md-width)
}

.okui-radio-md .okui-radio-children {
    font-size: var(--okd-radio-md-font-size);
    margin-left: var(--okd-radio-md-margin)
}

.okui-radio-md.okui-radio-wrapper {
    line-height: var(--okd-radio-md-line-height);
    padding-bottom: var(--okd-radio-md-padding);
    padding-top: var(--okd-radio-md-padding)
}

@media (min-width:768px) {

    .okui-radio-wrapper-disabled.okui-radio-wrapper-checked:hover .okui-radio-inner,
    .okui-radio-wrapper-disabled:hover .okui-radio-inner {
        border-color: var(--okd-radio-disabled-hover-border-color);
        box-shadow: none
    }

    .okui-radio-wrapper:not(.okui-radio-wrapper-disabled):hover .okui-radio-inner {
        border-color: var(--okd-radio-default-hover-border-color);
        box-shadow: var(--okd-radio-default-hover-shadow)
    }

    .okui-radio-wrapper-checked:not(.okui-radio-wrapper-disabled):hover .okui-radio-inner {
        border-color: var(--okd-radio-selected-hover-border-color);
        box-shadow: var(--okd-radio-selected-hover-shadow)
    }

    .okui-radio-wrapper-error:not(.okui-radio-wrapper-disabled):hover .okui-radio-inner {
        border-color: var(--okd-radio-error-hover-border-color);
        box-shadow: var(--okd-radio-error-hover-shadow)
    }
}

.okui-radio-reversed .okui-radio-inner {
    background-color: var(--okd-radio-reversed-default-background);
    border: 1px solid var(--okd-radio-reversed-default-border-color)
}

.okui-radio-reversed.okui-radio-wrapper .okui-radio-children {
    color: var(--okd-radio-reversed-default-text-color)
}

.okui-radio-reversed.okui-radio-wrapper.hover-status .okui-radio-inner,
.okui-radio-reversed.okui-radio-wrapper:hover .okui-radio-inner {
    border-color: var(--okd-radio-reversed-default-hover-border-color);
    box-shadow: var(--okd-radio-reversed-default-hover-shadow)
}

.okui-radio-reversed.okui-radio-wrapper-checked .okui-radio-children {
    color: var(--okd-radio-reversed-selected-text-color)
}

.okui-radio-reversed.okui-radio-wrapper-checked .okui-radio-inner {
    background-color: var(--okd-radio-reversed-selected-background);
    border-color: var(--okd-radio-reversed-selected-border-color)
}

.okui-radio-reversed.okui-radio-wrapper-checked .okui-radio-inner:after {
    background-color: var(--okd-radio-reversed-selected-inner-color);
    border: 2px solid var(--okd-radio-reversed-selected-inner-color)
}

.okui-radio-reversed.okui-radio-wrapper-checked:hover .okui-radio-inner {
    border-color: var(--okd-radio-reversed-selected-hover-border-color);
    box-shadow: var(--okd-radio-reversed-selected-hover-shadow)
}

.okui-radio-reversed.okui-radio-wrapper-error .okui-radio-children {
    color: var(--okd-radio-reversed-error-text-color)
}

.okui-radio-reversed.okui-radio-wrapper-error .okui-radio-inner {
    border-color: var(--okd-radio-reversed-error-border-color)
}

.okui-radio-reversed.okui-radio-wrapper-error.hover-status .okui-radio-inner,
.okui-radio-reversed.okui-radio-wrapper-error:hover .okui-radio-inner {
    border-color: var(--okd-radio-reversed-error-hover-border-color);
    box-shadow: var(--okd-radio-reversed-error-hover-shadow)
}

.okui-radio-reversed.okui-radio-wrapper-error.okui-radio-wrapper-checked .okui-radio-inner {
    background-color: var(--okd-radio-reversed-error-background);
    border-color: var(--okd-radio-reversed-error-border-color)
}

.okui-radio-reversed.okui-radio-wrapper-error.okui-radio-wrapper-checked .okui-radio-inner:after {
    background: var(--okd-radio-reversed-error-inner-color);
    border-color: var(--okd-radio-reversed-error-inner-color)
}

.okui-radio-reversed.okui-radio-wrapper-disabled .okui-radio-children {
    color: var(--okd-radio-reversed-disabled-text-color)
}

.okui-radio-reversed.okui-radio-wrapper-disabled .okui-radio .okui-radio-inner {
    background-color: var(--okd-radio-reversed-disabled-background);
    border-color: var(--okd-radio-reversed-disabled-border-color)
}

.okui-radio-reversed.okui-radio-wrapper-disabled.hover-status .okui-radio-inner,
.okui-radio-reversed.okui-radio-wrapper-disabled:hover .okui-radio-inner {
    border-color: var(--okd-radio-reversed-disabled-hover-border-color)
}

.okui-radio-reversed.okui-radio-wrapper-disabled.okui-radio-wrapper-checked .okui-radio-inner {
    border-color: var(--okd-radio-reversed-disabled-checked-border-color)
}

.okui-radio-reversed.okui-radio-wrapper-disabled.okui-radio-wrapper-checked .okui-radio-inner:after {
    background-color: var(--okd-radio-reversed-disabled-checked-inner-color);
    border-color: var(--okd-radio-reversed-disabled-inner-color)
}

.okui-breadcrumbs,
.okui-breadcrumbs-crumb,
.okui-breadcrumbs-crumb-active {
    align-items: center;
    display: flex
}

.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link {
    font-weight: var(--okd-hyperlink-medium-font-weight);
    font-weight: var(--okd-breadcrumbs-primary-default-font-weight, var(--okd-hyperlink-medium-font-weight))
}

.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link,
.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link a,
.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link a:active,
.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link a:visited {
    color: var(--okd-hyperlink-primary-default-color);
    color: var(--okd-breadcrumbs-primary-default-font-color, var(--okd-hyperlink-primary-default-color))
}

.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-link:hover {
    font-weight: 500;
    font-weight: var(--okd-breadcrumbs-primary-hover-font-weight, 500)
}

.okui-breadcrumbs-primary .okui-breadcrumbs-crumb-active {
    color: var(--okd-breadcrumbs-primary-current-font-color);
    font-weight: var(--okd-breadcrumbs-common-current-font-weight);
    font-weight: var(--okd-breadcrumbs-primary-current-font-weight, var(--okd-breadcrumbs-common-current-font-weight))
}

.okui-breadcrumbs-primary .crumb-icon {
    color: var(--okd-breadcrumbs-primary-icon-color)
}

.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link {
    font-weight: var(--okd-hyperlink-medium-font-weight);
    font-weight: var(--okd-breadcrumbs-secondary-default-font-weight, var(--okd-hyperlink-medium-font-weight))
}

.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link,
.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link a,
.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link a:active,
.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link a:visited {
    color: var(--okd-hyperlink-secondary-default-color);
    color: var(--okd-breadcrumbs-secondary-default-font-color, var(--okd-hyperlink-secondary-default-color))
}

.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-link:hover {
    font-weight: 500;
    font-weight: var(--okd-breadcrumbs-secondary-hover-font-weight, 500)
}

.okui-breadcrumbs-secondary .okui-breadcrumbs-crumb-active {
    color: var(--okd-breadcrumbs-secondary-current-font-color);
    font-weight: var(--okd-breadcrumbs-common-current-font-weight);
    font-weight: var(--okd-breadcrumbs-secondary-current-font-weight, var(--okd-breadcrumbs-common-current-font-weight))
}

.okui-breadcrumbs-secondary .crumb-icon {
    color: var(--okd-breadcrumbs-secondary-icon-color)
}

.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link {
    font-weight: var(--okd-hyperlink-medium-font-weight);
    font-weight: var(--okd-breadcrumbs-reversed-default-font-weight, var(--okd-hyperlink-medium-font-weight))
}

.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link,
.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link a,
.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link a:active,
.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link a:visited {
    color: var(--okd-hyperlink-reversed-default-color);
    color: var(--okd-breadcrumbs-reversed-default-font-color, var(--okd-hyperlink-reversed-default-color))
}

.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-link:hover {
    font-weight: 500;
    font-weight: var(--okd-breadcrumbs-reversed-hover-font-weight, 500)
}

.okui-breadcrumbs-reversed .okui-breadcrumbs-crumb-active {
    color: var(--okd-breadcrumbs-reversed-current-font-color);
    font-weight: var(--okd-breadcrumbs-common-current-font-weight);
    font-weight: var(--okd-breadcrumbs-reversed-current-font-weight, var(--okd-breadcrumbs-common-current-font-weight))
}

.okui-breadcrumbs-reversed .crumb-icon {
    color: var(--okd-breadcrumbs-reversed-icon-color)
}

.okui-breadcrumbs-xs .okui-breadcrumbs-crumb-active {
    font-size: var(--okd-breadcrumbs-xs-current-font-size);
    line-height: var(--okd-breadcrumbs-xs-current-line-height)
}

.okui-breadcrumbs-xs .crumb-icon {
    font-size: var(--okd-breadcrumbs-xs-icon-font-size);
    margin-left: var(--okd-breadcrumbs-xs-icon-margin-left);
    margin-right: var(--okd-breadcrumbs-xs-icon-margin-right)
}

.okui-breadcrumbs-sm .okui-breadcrumbs-crumb-active {
    font-size: var(--okd-breadcrumbs-sm-current-font-size);
    line-height: var(--okd-breadcrumbs-sm-current-line-height)
}

.okui-breadcrumbs-sm .crumb-icon {
    font-size: var(--okd-breadcrumbs-sm-icon-font-size);
    margin-left: var(--okd-breadcrumbs-sm-icon-margin-left);
    margin-right: var(--okd-breadcrumbs-sm-icon-margin-right)
}

.okui-breadcrumbs-md .okui-breadcrumbs-crumb-active {
    font-size: var(--okd-breadcrumbs-md-current-font-size);
    line-height: var(--okd-breadcrumbs-md-current-line-height)
}

.okui-breadcrumbs-md .crumb-icon {
    font-size: var(--okd-breadcrumbs-md-icon-font-size);
    margin-left: var(--okd-breadcrumbs-md-icon-margin-left);
    margin-right: var(--okd-breadcrumbs-md-icon-margin-right)
}

.okui-breadcrumbs-lg .okui-breadcrumbs-crumb-active {
    font-size: var(--okd-breadcrumbs-lg-current-font-size);
    line-height: var(--okd-breadcrumbs-lg-current-line-height)
}

.okui-breadcrumbs-lg .crumb-icon {
    font-size: var(--okd-breadcrumbs-lg-icon-font-size);
    margin-left: var(--okd-breadcrumbs-lg-icon-margin-left);
    margin-right: var(--okd-breadcrumbs-lg-icon-margin-right)
}

.okui-slider {
    display: flex
}

.okui-slider div {
    box-sizing: border-box
}

.okui-slider-content {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    padding: 5px 8px
}

.okui-slider-total {
    align-items: center;
    display: flex;
    margin-left: 16px;
    width: 48px
}

.okui-slider-label {
    color: var(--okd-slider-label-color);
    font-size: var(--okd-slider-label-font-size);
    line-height: var(--okd-slider-label-line-height)
}

.okui-slider-desc {
    color: var(--okd-slider-desc-color);
    font-size: var(--okd-slider-desc-font-size);
    line-height: var(--okd-slider-desc-line-height);
    margin-top: 6px;
    margin-top: var(--okd-slider-desc-margin-top, 6px)
}

.okui-slider-clickable {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 10px;
    margin: 10px 0
}

.okui-slider-clickable-margin {
    margin-bottom: 20px
}

.okui-slider-track {
    background: var(--okd-slider-common-track-color);
    border-radius: 3px;
    height: var(--okd-slider-md-track-height);
    position: relative;
    width: 100%
}

.okui-slider-mark {
    background-color: var(--okd-slider-common-active-color);
    border-radius: 3px;
    height: 100%;
    position: absolute
}

.okui-slider-mark-node {
    align-items: center;
    background: var(--okd-slider-node-bg-color);
    border: 1px solid var(--okd-slider-node-border-color);
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    height: var(--okd-slider-md-node-size);
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--okd-slider-md-node-size)
}

.okui-slider-mark-node-text {
    color: var(--okd-slider-common-text-color);
    font-size: 12px;
    left: 50%;
    line-height: 20px;
    position: absolute;
    top: 14px;
    top: var(--okd-slider-common-top, 14px);
    transform: translateX(-50%);
    word-break: keep-all
}

.okui-slider-mark-node:last-child .okui-slider-mark-node-text {
    left: auto;
    right: 0;
    transform: none
}

.okui-slider-mark-node:first-child .okui-slider-mark-node-text {
    left: 0;
    transform: none
}

.okui-slider-mark-node-active {
    border-color: var(--okd-slider-common-active-color)
}

.okui-slider-mark-node-active .okui-slider-mark-node-text {
    color: var(--okd-slider-common-text-color);
    color: var(--okd-slider-common-text-active-color, var(--okd-slider-common-text-color))
}

.okui-slider-mark-node-no-circle {
    background: none;
    border: none
}

.okui-slider-handler {
    align-items: center;
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.okui-slider-handler:focus-visible {
    border-radius: 20px;
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-slider-handler-inner {
    background-color: #fff;
    background-color: var(--okd-slider-handler-bg-color, #fff);
    border: 2px solid var(--okd-slider-handler-border-color);
    border-radius: 100%;
    height: var(--okd-slider-md-handler-size);
    width: var(--okd-slider-md-handler-size)
}

.okui-slider-handler-inner.okui-slider-active,
.okui-slider-handler-inner:hover {
    height: var(--okd-slider-md-handler-hover-size);
    width: var(--okd-slider-md-handler-hover-size)
}

.okui-slider-handler-inner.okui-slider-active {
    border: 4px solid var(--okd-slider-handler-shadow-color)
}

.okui-slider-disabled {
    cursor: not-allowed
}

.okui-slider-disabled .okui-slider-handler-inner {
    border-color: var(--okd-slider-handler-border-disabled-color, var(--okd-slider-handler-border-color))
}

.okui-slider-disabled .okui-slider-handler-inner:hover {
    height: var(--okd-slider-md-handler-size);
    width: var(--okd-slider-md-handler-size)
}

.okui-slider-disabled .okui-slider-mark {
    background-color: var(--okd-slider-common-active-color);
    background-color: var(--okd-slider-common-disabled-active-color, var(--okd-slider-common-active-color))
}

.okui-slider-disabled .okui-slider-mark-node-active {
    border-color: var(--okd-slider-common-disabled-active-color, var(--okd-slider-common-active-color))
}

.okui-slider-disabled .okui-slider-mark-node-active .okui-slider-mark-node-text {
    color: var(--okd-slider-common-text-color);
    color: var(--okd-slider-common-text-disabled-active-color, var(--okd-slider-common-text-color))
}

.okui-slider-sm .okui-slider-track {
    height: var(--okd-slider-sm-track-height)
}

.okui-slider-sm .okui-slider-mark-node {
    background: var(--okd-slider-node-bg-color);
    border: 1px solid var(--okd-slider-node-border-color);
    height: var(--okd-slider-sm-node-size);
    width: var(--okd-slider-sm-node-size)
}

.okui-slider-sm .okui-slider-mark-node-active {
    border: 1px solid var(--okd-slider-common-active-color)
}

.okui-slider-sm .okui-slider-mark-node-text {
    top: 14px;
    top: var(--okd-slider-sm-node-text-top, 14px)
}

.okui-slider-sm .okui-slider-handler-inner {
    border: 2px solid var(--okd-slider-handler-border-color);
    height: var(--okd-slider-sm-handler-size);
    width: var(--okd-slider-sm-handler-size)
}

.okui-slider-sm .okui-slider-handler-inner:hover {
    height: var(--okd-slider-sm-handler-hover-size);
    width: var(--okd-slider-sm-handler-hover-size)
}

.okui-slider-sm .okui-slider-handler-inner.okui-slider-active {
    border-width: 2px
}

.okui-slider-sm .okui-slider-active {
    height: var(--okd-slider-sm-handler-hover-size);
    width: var(--okd-slider-sm-handler-hover-size)
}

.okui-slider-sm .okui-slider-disabled {
    cursor: not-allowed
}

.okui-slider-sm .okui-slider-disabled .okui-slider-handler-inner {
    border-color: var(--okd-slider-handler-border-disabled-color, var(--okd-slider-handler-border-color))
}

.okui-slider-sm .okui-slider-disabled .okui-slider-handler-inner:hover {
    height: var(--okd-slider-sm-handler-size);
    width: var(--okd-slider-sm-handler-size)
}

.okui-slider-sm .okui-slider-disabled .okui-slider-mark {
    background-color: var(--okd-slider-common-active-color);
    background-color: var(--okd-slider-common-disabled-active-color, var(--okd-slider-common-active-color))
}

.okui-slider-sm .okui-slider-disabled .okui-slider-mark-node-active {
    border-color: var(--okd-slider-common-disabled-active-color, var(--okd-slider-common-active-color))
}

.okui-slider-sm .okui-slider-disabled .okui-slider-mark-node-active .okui-slider-mark-node-text {
    color: var(--okd-slider-common-text-color);
    color: var(--okd-slider-common-text-disabled-active-color, var(--okd-slider-common-text-color))
}

.okui-form-line>.okui-form-item-control>.okui-form-item-control-input>.okui-form-item-control-input-content {
    display: flex
}

.okui-form-line>.okui-form-item-control>.okui-form-item-control-input>.okui-form-item-control-input-content>.okui-form-item {
    margin-right: 16px
}

.okui-form-line>.okui-form-item-control>.okui-form-item-control-input>.okui-form-item-control-input-content>.okui-form-item:last-child {
    margin-right: 0
}

.okui-form-line.okui-form-line-column>.okui-form-item-control>.okui-form-item-control-input>.okui-form-item-control-input-content {
    flex-direction: column
}

.okui-form-line.okui-form-line-column>.okui-form-item-control>.okui-form-item-control-input>.okui-form-item-control-input-content>.okui-form-item {
    margin-right: 0
}

.okui-form-line.okui-form-line-hidden {
    display: none !important
}

.okui-overflow_scroll {
    position: relative;
    width: 100%
}

.okui-overflow_scroll-scroll {
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    white-space: nowrap;
    width: 100%
}

.okui-overflow_scroll-scroll::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0
}

.okui-overflow_scroll-scroll-children {
    display: flex;
    white-space: nowrap;
    width: -moz-fit-content;
    width: fit-content
}

.okui-overflow_scroll-nav {
    cursor: pointer
}

.okui-overflow_scroll-nav-icon {
    align-items: center;
    background-image: linear-gradient(270deg, #fff 72.22%, hsla(0, 0%, 100%, 0));
    background-image: linear-gradient(270deg, var(--okd-overflowscroll-icon-bg-start-color, #fff) 72.22%, var(--okd-overflowscroll-icon-bg-end-color, hsla(0, 0%, 100%, 0)) 100%);
    color: #929292;
    color: var(--okd-overflowscroll-icon-color, #929292);
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0;
    visibility: visible;
    width: 36px;
    z-index: 9
}

.okui-overflow_scroll-nav-icon:hover {
    color: #3d3d3d;
    color: var(--okd-overflowscroll-icon-hover-color, #3d3d3d)
}

.okui-overflow_scroll-nav .icon-left {
    background-image: linear-gradient(-270deg, #fff 72.22%, hsla(0, 0%, 100%, 0));
    background-image: linear-gradient(-270deg, var(--okd-overflowscroll-icon-bg-start-color, #fff) 72.22%, var(--okd-overflowscroll-icon-bg-end-color, hsla(0, 0%, 100%, 0)) 100%);
    left: 0
}

.okui-overflow_scroll-nav .icon-left-inner {
    transform: rotate(180deg)
}

.okui-overflow_scroll-nav .icon-right {
    right: 0
}

.okui-overflow_scroll-nav .icon-hide {
    visibility: hidden
}

.okui-overflow_scroll-right-alpha {
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff);
    background-image: linear-gradient(90deg, var(--okd-overflowscroll-icon-bg-end-color, hsla(0, 0%, 100%, 0)), var(--okd-overflowscroll-icon-bg-start-color, #fff));
    height: 100%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    z-index: 9
}

.okui-form-item-no-style-hidden {
    display: none
}

.okui-form-item {
    flex: auto;
    max-width: 100%;
    min-height: auto
}

.okui-form-item.okui-form-item-hidden {
    display: none !important
}

.okui-form-item .okui-form-item-label {
    color: var(--okd-input-label-color);
    position: relative
}

.okui-form-item .okui-form-item-label.okui-form-item-label-required:before {
    color: #da252f;
    color: var(--okd-form-item-label-required-color, #da252f);
    content: "*";
    margin-right: 4px;
    margin-right: var(--okd-form-item-label-required-margin-horizontal, 4px)
}

.okui-form-item .okui-form-item-label-action {
    color: var(--okd-input-action-color);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.okui-form-item .okui-form-item-control-input-content {
    flex: auto;
    max-width: 100%
}

.okui-form-item .okui-form-item-control-explain {
    margin-top: 4px;
    margin-top: var(--okd-input-md-tip-margin, 4px);
    position: relative
}

.okui-form-item .okui-form-item-control-explain-error {
    color: var(--okd-input-error-tips-color)
}

.okui-form-item .okui-form-item-control-explain-tip {
    color: var(--okd-input-tips-text-color)
}

.okui-form-item .okui-form-item-control-extra {
    color: var(--okd-input-tips-text-color);
    margin-top: 4px;
    margin-top: var(--okd-input-md-tip-margin, 4px)
}

.okui-form * {
    box-sizing: border-box
}

.okui-form .okui-form-item {
    display: flex;
    vertical-align: top
}

.okui-form .okui-form-item.okui-form-item-no-margin,
.okui-form .okui-form-item:not(.okui-form-item-has-error-preserve-margin).okui-form-item-has-error,
.okui-form .okui-form-item:not(.okui-form-item-has-error-preserve-margin).okui-form-item-has-tip {
    margin-bottom: 0 !important
}

.okui-form .okui-form-item.okui-form-item-xs,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name {
    margin-bottom: calc(var(--okd-input-xs-tip-line-height) + var(--okd-input-xs-tip-margin, 4px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-xs .okui-form-item-label,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-label {
    font-size: var(--okd-input-xs-label-font-size)
}

.okui-form .okui-form-item.okui-form-item-xs.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-item-xs.okui-form-item-has-tip .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-tip .okui-form-item-control-explain {
    line-height: 1.6;
    min-height: calc(var(--okd-input-xs-tip-line-height) + 9px);
    min-height: calc(var(--okd-input-xs-tip-line-height) + var(--okd-input-xs-tip-margin, 4px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-xs .okui-form-item-control-extra,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-extra {
    font-size: var(--okd-input-xs-tip-font-size)
}

.okui-form .okui-form-item.okui-form-item-xs .okui-form-item-control-explain-error,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-error {
    font-size: var(--okd-input-xs-error-font-size)
}

.okui-form .okui-form-item.okui-form-item-xs .okui-form-item-control-explain-tip,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-tip {
    font-size: var(--okd-input-xs-tip-font-size)
}

.okui-form .okui-form-item.okui-form-item-sm,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name {
    margin-bottom: calc(var(--okd-input-sm-tip-line-height) + var(--okd-input-sm-tip-margin, 4px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-sm .okui-form-item-label,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-label {
    font-size: var(--okd-input-sm-label-font-size)
}

.okui-form .okui-form-item.okui-form-item-sm.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-item-sm.okui-form-item-has-tip .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-tip .okui-form-item-control-explain {
    line-height: 1.6;
    min-height: calc(var(--okd-input-sm-tip-line-height) + 9px);
    min-height: calc(var(--okd-input-sm-tip-line-height) + var(--okd-input-sm-tip-margin, 4px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-sm .okui-form-item-control-extra,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-extra {
    font-size: var(--okd-input-sm-tip-font-size)
}

.okui-form .okui-form-item.okui-form-item-sm .okui-form-item-control-explain-error,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-error {
    font-size: var(--okd-input-sm-error-font-size)
}

.okui-form .okui-form-item.okui-form-item-sm .okui-form-item-control-explain-tip,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-tip {
    font-size: var(--okd-input-sm-tip-font-size)
}

.okui-form .okui-form-item.okui-form-item-md,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name {
    margin-bottom: calc(var(--okd-input-md-tip-line-height) + var(--okd-input-md-tip-margin, 4px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-md .okui-form-item-label,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-label {
    font-size: var(--okd-input-md-label-font-size)
}

.okui-form .okui-form-item.okui-form-item-md.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-item-md.okui-form-item-has-tip .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-tip .okui-form-item-control-explain {
    line-height: 1.6;
    min-height: calc(var(--okd-input-md-tip-line-height) + 9px);
    min-height: calc(var(--okd-input-md-tip-line-height) + var(--okd-input-md-tip-margin, 4px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-md .okui-form-item-control-extra,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-extra {
    font-size: var(--okd-input-md-tip-font-size)
}

.okui-form .okui-form-item.okui-form-item-md .okui-form-item-control-explain-error,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-error {
    font-size: var(--okd-input-md-error-font-size)
}

.okui-form .okui-form-item.okui-form-item-md .okui-form-item-control-explain-tip,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-tip {
    font-size: var(--okd-input-md-tip-font-size)
}

.okui-form .okui-form-item.okui-form-item-lg,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name {
    margin-bottom: calc(var(--okd-input-lg-tip-line-height) + var(--okd-input-lg-tip-margin, 6px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-lg .okui-form-item-label,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-label {
    font-size: var(--okd-input-lg-label-font-size)
}

.okui-form .okui-form-item.okui-form-item-lg.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-item-lg.okui-form-item-has-tip .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-tip .okui-form-item-control-explain {
    line-height: 1.6;
    min-height: calc(var(--okd-input-lg-tip-line-height) + 11px);
    min-height: calc(var(--okd-input-lg-tip-line-height) + var(--okd-input-lg-tip-margin, 6px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-lg .okui-form-item-control-extra,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-extra {
    font-size: var(--okd-input-lg-tip-font-size)
}

.okui-form .okui-form-item.okui-form-item-lg .okui-form-item-control-explain-error,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-error {
    font-size: var(--okd-input-lg-error-font-size)
}

.okui-form .okui-form-item.okui-form-item-lg .okui-form-item-control-explain-tip,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-tip {
    font-size: var(--okd-input-lg-tip-font-size)
}

.okui-form .okui-form-item.okui-form-item-xl,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name {
    margin-bottom: calc(var(--okd-input-xl-tip-line-height) + var(--okd-input-xl-tip-margin, 6px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-xl .okui-form-item-label,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-label {
    font-size: var(--okd-input-xl-label-font-size)
}

.okui-form .okui-form-item.okui-form-item-xl.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-item-xl.okui-form-item-has-tip .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-error .okui-form-item-control-explain,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name.okui-form-item-has-tip .okui-form-item-control-explain {
    line-height: 1.6;
    min-height: calc(var(--okd-input-xl-tip-line-height) + 11px);
    min-height: calc(var(--okd-input-xl-tip-line-height) + var(--okd-input-xl-tip-margin, 6px) + 5px)
}

.okui-form .okui-form-item.okui-form-item-xl .okui-form-item-control-extra,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-extra {
    font-size: var(--okd-input-xl-tip-font-size)
}

.okui-form .okui-form-item.okui-form-item-xl .okui-form-item-control-explain-error,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-error {
    font-size: var(--okd-input-xl-error-font-size)
}

.okui-form .okui-form-item.okui-form-item-xl .okui-form-item-control-explain-tip,
.okui-form .okui-form-item.okui-form-line.okui-form-item-has-name .okui-form-item-control-explain-tip {
    font-size: var(--okd-input-xl-tip-font-size)
}

.okui-form .okui-form-item.okui-form-line {
    margin-bottom: 0
}

.okui-form.okui-form-vertical .okui-form-item {
    flex-direction: column
}

.okui-form.okui-form-vertical .okui-form-item.okui-form-item-xs .okui-form-item-label {
    line-height: var(--okd-input-xs-label-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-xs-label-margin, 4px)
}

.okui-form.okui-form-vertical .okui-form-item.okui-form-item-sm .okui-form-item-label {
    line-height: var(--okd-input-sm-label-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-sm-label-margin, 4px)
}

.okui-form.okui-form-vertical .okui-form-item.okui-form-item-md .okui-form-item-label {
    line-height: var(--okd-input-md-label-line-height);
    margin-bottom: 4px;
    margin-bottom: var(--okd-input-md-label-margin, 4px)
}

.okui-form.okui-form-vertical .okui-form-item.okui-form-item-lg .okui-form-item-label {
    line-height: var(--okd-input-lg-label-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-lg-label-margin, 6px)
}

.okui-form.okui-form-vertical .okui-form-item.okui-form-item-xl .okui-form-item-label {
    line-height: var(--okd-input-xl-label-line-height);
    margin-bottom: 6px;
    margin-bottom: var(--okd-input-xl-label-margin, 6px)
}

.okui-form.okui-form-horizontal .okui-form-item-no-label .okui-form-item-control {
    margin-left: 16.66666667%;
    margin-left: var(--okd-form-item-label-width-horizontal, 16.66666667%)
}

.okui-form.okui-form-horizontal .okui-form-item .okui-form-item-label {
    flex: 0 0 16.66666667%;
    flex: 0 0 var(--okd-form-item-label-width-horizontal, 16.66666667%);
    overflow: hidden;
    white-space: nowrap;
    width: 16.66666667%;
    width: var(--okd-form-item-label-width-horizontal, 16.66666667%)
}

.okui-form.okui-form-horizontal .okui-form-item .okui-form-item-label:after {
    content: ":";
    margin: 0 8px 0 2px
}

.okui-form.okui-form-horizontal .okui-form-item .okui-form-item-label.okui-form-item-label-no-colon:after {
    content: ""
}

.okui-form.okui-form-horizontal .okui-form-item .okui-form-item-label.okui-form-item-label-align-left {
    text-align: left
}

.okui-form.okui-form-horizontal .okui-form-item .okui-form-item-label.okui-form-item-label-align-right {
    text-align: right
}

.okui-form.okui-form-horizontal .okui-form-item .okui-form-item-label-action {
    display: none
}

.okui-form.okui-form-horizontal .okui-form-item .okui-form-item-control {
    flex: 1 1
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-xs .okui-form-item-label {
    line-height: var(--okd-input-xs-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-xs .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-xs-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-xs .okui-form-item-control-input-content {
    width: 100%
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-sm .okui-form-item-label {
    line-height: var(--okd-input-sm-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-sm .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-sm-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-sm .okui-form-item-control-input-content {
    width: 100%
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-md .okui-form-item-label {
    line-height: var(--okd-input-md-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-md .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-md-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-md .okui-form-item-control-input-content {
    width: 100%
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-lg .okui-form-item-label {
    line-height: var(--okd-input-lg-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-lg .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-lg-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-lg .okui-form-item-control-input-content {
    width: 100%
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-xl .okui-form-item-label {
    line-height: var(--okd-input-xl-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-xl .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-xl-height)
}

.okui-form.okui-form-horizontal .okui-form-item.okui-form-item-xl .okui-form-item-control-input-content {
    width: 100%
}

.okui-form.okui-form-horizontal .okui-form-line .okui-form-item-no-label .okui-form-item-control {
    margin-left: 0
}

.okui-form.okui-form-inline {
    display: flex;
    flex-wrap: wrap
}

.okui-form.okui-form-inline .okui-form-item {
    display: flex;
    flex: none;
    margin-right: 16px;
    margin-right: var(--okd-form-item-margin-inline, 16px)
}

.okui-form.okui-form-inline .okui-form-item .okui-form-item-label {
    width: auto
}

.okui-form.okui-form-inline .okui-form-item .okui-form-item-label:after {
    content: ":";
    margin: 0 8px 0 2px
}

.okui-form.okui-form-inline .okui-form-item .okui-form-item-label .okui-form-item-label-action,
.okui-form.okui-form-inline .okui-form-item .okui-form-item-label-action {
    display: none
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-xs .okui-form-item-label {
    line-height: var(--okd-input-xs-height)
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-xs .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-xs-height)
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-sm .okui-form-item-label {
    line-height: var(--okd-input-sm-height)
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-sm .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-sm-height)
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-md .okui-form-item-label {
    line-height: var(--okd-input-md-height)
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-md .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-md-height)
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-lg .okui-form-item-label {
    line-height: var(--okd-input-lg-height)
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-lg .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-lg-height)
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-xl .okui-form-item-label {
    line-height: var(--okd-input-xl-height)
}

.okui-form.okui-form-inline .okui-form-item.okui-form-item-xl .okui-form-item-control-input {
    align-items: center;
    display: flex;
    min-height: var(--okd-input-xl-height)
}

.okui-accordion {
    border-bottom: 1px solid #ebebeb;
    border-bottom: 1px solid var(--okd-accordion-main-border-color, #ebebeb);
    display: flex;
    flex-direction: column
}

.okui-accordion-header {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 32px 0;
    padding: var(--okd-accordion-header-padding-vertical, 32px) var(--okd-accordion-header-padding-horizontal, 0)
}

.okui-accordion-header-title {
    color: #000;
    color: var(--okd-accordion-header-title-color, #000);
    font-size: 18px;
    font-size: var(--okd-accordion-header-title-font-size, 18px);
    font-weight: 500;
    font-weight: var(--okd-accordion-header-title-font-weight, 500);
    line-height: 24px;
    line-height: var(--okd-accordion-header-title-line-height, 24px)
}

.okui-accordion-header .okui-accordion-header-icon {
    color: #929292;
    color: var(--okd-accordion-header-icon-color, #929292);
    font-size: 20px;
    font-size: var(--okd-accordion-header-icon-size, 20px);
    transition: all .2s cubic-bezier(.34, .69, .1, 1)
}

.okui-accordion-header-icon-expanded {
    transform: rotate(180deg)
}

.okui-accordion-content {
    color: #929292;
    color: var(--okd-accordion-content-color, #929292);
    display: none;
    font-size: 14px;
    font-size: var(--okd-accordion-content-font-size, 14px);
    font-weight: 400;
    font-weight: var(--okd-accordion-content-font-weight, 400);
    line-height: 1.58;
    line-height: var(--okd-accordion-content-line-height, 1.58);
    overflow: hidden
}

.okui-accordion-content-transition-out {
    margin-bottom: 0;
    max-height: 0;
    opacity: 0;
    transform: translateY(-30px);
    transition: all .2s;
    will-change: transform, opacity, max-height
}

.okui-accordion-content-transition-in {
    max-height: -moz-max-content;
    max-height: max-content;
    opacity: 1;
    transform: translateY(0)
}

.okui-accordion-content-expanded {
    display: block;
    margin-bottom: 32px;
    margin-bottom: var(--okd-accordion-header-padding-vertical, 32px)
}

@media (max-width:767px) {
    .okui-accordion-header-title {
        font-size: 14px;
        font-size: var(--okd-accordion-header-title-sm-font-size, 14px);
        font-weight: 500;
        font-weight: var(--okd-accordion-header-title-sm-font-weight, 500);
        line-height: 16px;
        line-height: var(--okd-accordion-header-title-sm-line-height, 16px)
    }

    .okui-accordion-header .okui-accordion-header-icon {
        font-size: 16px;
        font-size: var(--okd-accordion-header-icon-sm-size, 16px)
    }

    .okui-accordion-content {
        font-size: 12px;
        font-size: var(--okd-accordion-content-sm-font-size, 12px);
        font-weight: 400;
        font-weight: var(--okd-accordion-content-sm-font-weight, 400);
        line-height: 1.58;
        line-height: var(--okd-accordion-content-sm-line-height, 1.58)
    }
}

.okui-btn .btn-content {
    align-items: center;
    display: flex
}

.okui-btn .okui-btn-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.loading .btn-content {
    opacity: 0
}

.okui-btn.loading .btn-content-position {
    display: none
}

.okui-btn.loading .okui-btn-loader {
    line-height: 0;
    position: absolute
}

.okui-btn.loading .btn-loader-position-absolute {
    position: relative
}

.okui-btn-loader-container {
    height: 100%;
    position: relative
}

.okui-btn .btn-icon+.btn-content {
    margin-left: 4px
}

.okui-btn.btn-xxs .btn-icon {
    font-size: var(--okd-button-xxs-icon-size)
}

.okui-btn.btn-xxs .btn-icon-leading {
    margin-right: var(--okd-button-xxs-icon-margin)
}

.okui-btn.btn-xxs .btn-icon-tailing {
    margin-left: var(--okd-button-xxs-icon-margin)
}

.okui-btn.btn-xxs .okui-btn-loader-size {
    border-radius: var(--okd-button-xxs-loader-size);
    height: var(--okd-button-xxs-loader-size);
    width: var(--okd-button-xxs-loader-size)
}

.okui-btn.btn-xs .btn-icon {
    font-size: var(--okd-button-xs-icon-size)
}

.okui-btn.btn-xs .btn-icon-leading {
    margin-right: var(--okd-button-xs-icon-margin)
}

.okui-btn.btn-xs .btn-icon-tailing {
    margin-left: var(--okd-button-xs-icon-margin)
}

.okui-btn.btn-xs .okui-btn-loader-size {
    border-radius: var(--okd-button-xs-loader-size);
    height: var(--okd-button-xs-loader-size);
    width: var(--okd-button-xs-loader-size)
}

.okui-btn.btn-s .btn-icon {
    font-size: var(--okd-button-s-icon-size)
}

.okui-btn.btn-s .btn-icon-leading {
    margin-right: var(--okd-button-s-icon-margin)
}

.okui-btn.btn-s .btn-icon-tailing {
    margin-left: var(--okd-button-s-icon-margin)
}

.okui-btn.btn-s .okui-btn-loader-size {
    border-radius: var(--okd-button-s-loader-size);
    height: var(--okd-button-s-loader-size);
    width: var(--okd-button-s-loader-size)
}

.okui-btn.btn-sm .btn-icon {
    font-size: var(--okd-button-sm-icon-size)
}

.okui-btn.btn-sm .btn-icon-leading {
    margin-right: var(--okd-button-sm-icon-margin)
}

.okui-btn.btn-sm .btn-icon-tailing {
    margin-left: var(--okd-button-sm-icon-margin)
}

.okui-btn.btn-sm .okui-btn-loader-size {
    border-radius: var(--okd-button-sm-loader-size);
    height: var(--okd-button-sm-loader-size);
    width: var(--okd-button-sm-loader-size)
}

.okui-btn.btn-md .btn-icon {
    font-size: var(--okd-button-md-icon-size)
}

.okui-btn.btn-md .btn-icon-leading {
    margin-right: var(--okd-button-md-icon-margin)
}

.okui-btn.btn-md .btn-icon-tailing {
    margin-left: var(--okd-button-md-icon-margin)
}

.okui-btn.btn-md .okui-btn-loader-size {
    border-radius: var(--okd-button-md-loader-size);
    height: var(--okd-button-md-loader-size);
    width: var(--okd-button-md-loader-size)
}

.okui-btn.btn-lg .btn-icon {
    font-size: var(--okd-button-lg-icon-size)
}

.okui-btn.btn-lg .btn-icon-leading {
    margin-right: var(--okd-button-lg-icon-margin)
}

.okui-btn.btn-lg .btn-icon-tailing {
    margin-left: var(--okd-button-lg-icon-margin)
}

.okui-btn.btn-lg .okui-btn-loader-size {
    border-radius: var(--okd-button-lg-loader-size);
    height: var(--okd-button-lg-loader-size);
    width: var(--okd-button-lg-loader-size)
}

.okui-btn.btn-xl .btn-icon {
    font-size: var(--okd-button-xl-icon-size)
}

.okui-btn.btn-xl .btn-icon-leading {
    margin-right: var(--okd-button-xl-icon-margin)
}

.okui-btn.btn-xl .btn-icon-tailing {
    margin-left: var(--okd-button-xl-icon-margin)
}

.okui-btn.btn-xl .okui-btn-loader-size {
    border-radius: var(--okd-button-xl-loader-size);
    height: var(--okd-button-xl-loader-size);
    width: var(--okd-button-xl-loader-size)
}

.okui-btn .okui-btn-fill-highlight-loader {
    border-color: var(--okd-button-fill-highlight-loader-track-color);
    border-top-color: var(--okd-button-fill-highlight-loader-mark-color)
}

.okui-btn {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    -webkit-appearance: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-weight: 500;
    justify-content: center;
    outline: none;
    position: relative;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.okui-btn:focus-visible {
    outline: 2px solid var(--okd-color-border-focus);
    outline-color: var(--okd-color-border-focus);
    outline-offset: 2px;
    outline-style: solid;
    outline-width: 2px
}

.okui-btn.btn-fill-highlight {
    background: var(--okd-button-fill-highlight-default-background);
    border-color: var(--okd-button-fill-highlight-default-border-color);
    border-style: solid;
    border-width: var(--okd-button-fill-highlight-border-size);
    box-shadow: var(--okd-button-fill-highlight-default-shadow);
    color: var(--okd-button-fill-highlight-default-font-color)
}

.okui-btn.btn-fill-highlight.hover,
.okui-btn.btn-fill-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover {
    background: var(--okd-button-fill-highlight-hover-background);
    border-color: var(--okd-button-fill-highlight-hover-border-color);
    box-shadow: var(--okd-button-fill-highlight-hover-shadow);
    color: var(--okd-button-fill-highlight-hover-font-color)
}

.okui-btn.btn-fill-highlight.hover .btn-icon,
.okui-btn.btn-fill-highlight:not(:disabled):not(.btn-disabled):not(.mobile):hover .btn-icon {
    color: var(--okd-button-fill-highlight-hover-icon-color)
}

.okui-btn.btn-fill-highlight.active,
.okui-btn.btn-fill-highlight:not(:disabled):active {
    background: var(--okd-button-fill-highlight-active-background);
    border-color: var(--okd-button-fill-highlight-active-border-color);
    box-shadow: var(--okd-button-fill-highlight-active-shadow);
    color: var(--okd-button-fill-highlight-active-font-color)
}

.okui-btn.btn-fill-highlight.active .btn-icon,
.okui-btn.btn-fill-highlight:not(:disabled):active .btn-icon {
    color: var(--okd-button-fill-highlight-active-icon-color)
}

.okui-btn.btn-fill-highlight:not(.loading).btn-disabled,
.okui-btn.btn-fill-highlight:not(.loading):disabled {
    background: var(--okd-button-fill-highlight-disabled-background);
    border-color: var(--okd-button-fill-highlight-disabled-border-color);
    box-shadow: var(--okd-button-fill-highlight-disabled-shadow);
    color: var(--okd-button-fill-highlight-disabled-font-color)
}

.okui-btn.btn-fill-highlight:not(.loading).btn-disabled .btn-icon,
.okui-btn.btn-fill-highlight:not(.loading):disabled .btn-icon {
    color: var(--okd-button-fill-highlight-disabled-icon-color)
}

.okui-btn.btn-fill-highlight.loading {
    cursor: pointer
}

.okui-btn.btn-fill-highlight .btn-icon {
    color: var(--okd-button-fill-highlight-default-icon-color)
}

.okui-btn.btn-fill-highlight .okui-btn-loader-text {
    color: var(--okd-button-fill-highlight-default-font-color)
}

.okui-btn.btn-fill-highlight.btn-xxs {
    padding: calc(var(--okd-button-xxs-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-xxs-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-xxs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xxs-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xxs-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-xxs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-xs {
    padding: calc(var(--okd-button-xs-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-xs-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-xs.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xs-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xs-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-xs.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-s {
    padding: calc(var(--okd-button-s-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-s-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-s.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-s-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-s-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-s.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-sm {
    padding: calc(var(--okd-button-sm-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-sm-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-sm.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-sm-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-sm-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-sm.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-md {
    padding: calc(var(--okd-button-md-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-md-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-md.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-md-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-md-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-md.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-lg {
    padding: calc(var(--okd-button-lg-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-lg-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-lg.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-lg-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-lg-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-lg.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-fill-highlight.btn-xl {
    padding: calc(var(--okd-button-xl-padding-vertical) + 1px - var(--okd-button-fill-highlight-border-size)) var(--okd-button-xl-padding-horizontal)
}

.okui-btn.btn-fill-highlight.btn-xl.okui-btn-strict-circle {
    border-radius: 100px;
    height: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-highlight-border-size)*2);
    min-width: 0;
    overflow: hidden;
    padding: 0;
    width: calc(var(--okd-button-xl-padding-vertical)*2 + 2px - var(--okd-button-fill-highlight-border-size)*2 + var(--okd-button-xl-line-height) + var(--okd-button-fill-highlight-border-size)*2)
}

.okui-btn.btn-fill-highlight.btn-xl.okui-btn-strict-circle .btn-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.okui-btn.btn-xxs {
    border-radius: var(--okd-button-xxs-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-xxs-font-weight, 500);
    min-width: var(--okd-button-xxs-min-width)
}

.okui-btn.btn-xxs,
.okui-btn.btn-xxs .okui-btn-loader-text {
    font-size: var(--okd-button-xxs-font-size);
    line-height: var(--okd-button-xxs-line-height)
}

.okui-btn.btn-xxs .okui-btn-loader-text {
    margin-left: var(--okd-button-xxs-loader-text-margin-left)
}

.okui-btn.btn-xxs.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-xxs-border-radius, 4px)
}

.okui-btn.btn-xs {
    border-radius: var(--okd-button-xs-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-xs-font-weight, 500);
    min-width: var(--okd-button-xs-min-width)
}

.okui-btn.btn-xs,
.okui-btn.btn-xs .okui-btn-loader-text {
    font-size: var(--okd-button-xs-font-size);
    line-height: var(--okd-button-xs-line-height)
}

.okui-btn.btn-xs .okui-btn-loader-text {
    margin-left: var(--okd-button-xs-loader-text-margin-left)
}

.okui-btn.btn-xs.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-xs-border-radius, 4px)
}

.okui-btn.btn-s {
    border-radius: var(--okd-button-s-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-s-font-weight, 500);
    min-width: var(--okd-button-s-min-width)
}

.okui-btn.btn-s,
.okui-btn.btn-s .okui-btn-loader-text {
    font-size: var(--okd-button-s-font-size);
    line-height: var(--okd-button-s-line-height)
}

.okui-btn.btn-s .okui-btn-loader-text {
    margin-left: var(--okd-button-s-loader-text-margin-left)
}

.okui-btn.btn-s.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-s-border-radius, 4px)
}

.okui-btn.btn-sm {
    border-radius: var(--okd-button-sm-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-sm-font-weight, 500);
    min-width: var(--okd-button-sm-min-width)
}

.okui-btn.btn-sm,
.okui-btn.btn-sm .okui-btn-loader-text {
    font-size: var(--okd-button-sm-font-size);
    line-height: var(--okd-button-sm-line-height)
}

.okui-btn.btn-sm .okui-btn-loader-text {
    margin-left: var(--okd-button-sm-loader-text-margin-left)
}

.okui-btn.btn-sm.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-sm-border-radius, 4px)
}

.okui-btn.btn-md {
    border-radius: var(--okd-button-md-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-md-font-weight, 500);
    min-width: var(--okd-button-md-min-width)
}

.okui-btn.btn-md,
.okui-btn.btn-md .okui-btn-loader-text {
    font-size: var(--okd-button-md-font-size);
    line-height: var(--okd-button-md-line-height)
}

.okui-btn.btn-md .okui-btn-loader-text {
    margin-left: var(--okd-button-md-loader-text-margin-left)
}

.okui-btn.btn-md.btn-rect {
    border-radius: 4px;
    border-radius: var(--okd-button-rect-md-border-radius, 4px)
}

.okui-btn.btn-lg {
    border-radius: var(--okd-button-lg-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-lg-font-weight, 500);
    min-width: var(--okd-button-lg-min-width)
}

.okui-btn.btn-lg,
.okui-btn.btn-lg .okui-btn-loader-text {
    font-size: var(--okd-button-lg-font-size);
    line-height: var(--okd-button-lg-line-height)
}

.okui-btn.btn-lg .okui-btn-loader-text {
    margin-left: var(--okd-button-lg-loader-text-margin-left)
}

.okui-btn.btn-lg.btn-rect {
    border-radius: 8px;
    border-radius: var(--okd-button-rect-lg-border-radius, 8px)
}

.okui-btn.btn-xl {
    border-radius: var(--okd-button-xl-border-radius);
    font-weight: 500;
    font-weight: var(--okd-button-xl-font-weight, 500);
    min-width: var(--okd-button-xl-min-width)
}

.okui-btn.btn-xl,
.okui-btn.btn-xl .okui-btn-loader-text {
    font-size: var(--okd-button-xl-font-size);
    line-height: var(--okd-button-xl-line-height)
}

.okui-btn.btn-xl .okui-btn-loader-text {
    margin-left: var(--okd-button-xl-loader-text-margin-left)
}

.okui-btn.btn-xl.btn-rect {
    border-radius: 8px;
    border-radius: var(--okd-button-rect-xl-border-radius, 8px)
}

.okui-btn.btn-disabled,
.okui-btn:disabled {
    cursor: not-allowed
}

.okui-btn.block {
    display: flex;
    width: 100%
}

.okui-btn.btn-circle {
    border-radius: 100px !important
}

.okui-badge {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    font-family: inherit;
    justify-content: center;
    margin-bottom: 0;
    outline: none;
    position: relative;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.okui-badge .badge-content {
    pointer-events: none
}

.okui-badge .badge-delete {
    cursor: pointer;
    margin-left: 8px
}

.okui-badge .badge-delete .icon {
    font-size: 14px
}

.okui-badge.badge-lg .badge-delete {
    margin-right: -2px
}

.okui-badge.badge-red {
    background: var(--okd-badge-red-background);
    color: var(--okd-badge-red-text-color)
}

.okui-badge.badge-red .badge-dot {
    background: var(--okd-badge-red-text-color)
}

.okui-badge.badge-red .badge-delete {
    color: var(--okd-badge-red-delete-color)
}

.okui-badge.badge-green {
    background: var(--okd-badge-green-background);
    color: var(--okd-badge-green-text-color)
}

.okui-badge.badge-green .badge-dot {
    background: var(--okd-badge-green-text-color)
}

.okui-badge.badge-green .badge-delete {
    color: var(--okd-badge-green-delete-color)
}

.okui-badge.badge-yellow {
    background: var(--okd-badge-yellow-background);
    color: var(--okd-badge-yellow-text-color)
}

.okui-badge.badge-yellow .badge-dot {
    background: var(--okd-badge-yellow-text-color)
}

.okui-badge.badge-yellow .badge-delete {
    color: var(--okd-badge-yellow-delete-color)
}

.okui-badge.badge-orange {
    background: var(--okd-badge-orange-background);
    color: var(--okd-badge-orange-text-color)
}

.okui-badge.badge-orange .badge-dot {
    background: var(--okd-badge-orange-text-color)
}

.okui-badge.badge-orange .badge-delete {
    color: var(--okd-badge-orange-delete-color)
}

.okui-badge.badge-blue {
    background: var(--okd-badge-blue-background);
    color: var(--okd-badge-blue-text-color)
}

.okui-badge.badge-blue .badge-dot {
    background: var(--okd-badge-blue-text-color)
}

.okui-badge.badge-blue .badge-delete {
    color: var(--okd-badge-blue-delete-color)
}

.okui-badge.badge-grey {
    background: var(--okd-badge-grey-background);
    color: var(--okd-badge-grey-text-color)
}

.okui-badge.badge-grey .badge-dot {
    background: var(--okd-badge-grey-text-color)
}

.okui-badge.badge-grey .badge-delete {
    color: var(--okd-badge-grey-delete-color)
}

.okui-badge.badge-md {
    font-size: var(--okd-badge-md-font-size);
    line-height: var(--okd-badge-md-line-height);
    padding: var(--okd-badge-md-padding-vertical) var(--okd-badge-md-padding-horizontal)
}

.okui-badge.badge-md.basic {
    border-radius: var(--okd-badge-basic-md-radius)
}

.okui-badge.badge-md.rounded {
    border-radius: var(--okd-badge-rounded-md-radius)
}

.okui-badge.badge-lg {
    font-size: var(--okd-badge-lg-font-size);
    line-height: var(--okd-badge-lg-line-height);
    padding: var(--okd-badge-lg-padding-vertical) var(--okd-badge-lg-padding-horizontal)
}

.okui-badge.badge-lg.basic {
    border-radius: var(--okd-badge-basic-lg-radius)
}

.okui-badge.badge-lg.rounded {
    border-radius: var(--okd-badge-rounded-lg-radius)
}

.okui-overflow_scroll-reversed .okui-overflow_scroll-nav-icon {
    background-image: linear-gradient(270deg, var(--okd-color-gray-900) 72.22%, var(--okd-color-gray-900) 100%);
    background-image: linear-gradient(270deg, var(--okd-overflowscroll-reversed-icon-bg-start-color, var(--okd-color-gray-900)) 72.22%, var(--okd-overflowscroll-reversed-icon-bg-end-color, var(--okd-color-gray-900)) 100%);
    color: #929292;
    color: var(--okd-overflowscroll-reversed-icon-color, #929292)
}

.okui-overflow_scroll-reversed .okui-overflow_scroll-nav-icon:hover {
    color: #e4e2e2;
    color: var(--okd-overflowscroll-reversed-icon-hover-color, #e4e2e2)
}

.okui-overflow_scroll-reversed .icon-left {
    background-image: linear-gradient(-270deg, var(--okd-color-gray-900) 72.22%, var(--okd-color-gray-900) 100%);
    background-image: linear-gradient(-270deg, var(--okd-overflowscroll-reversed-icon-bg-start-color, var(--okd-color-gray-900)) 72.22%, var(--okd-overflowscroll-reversed-icon-bg-end-color, var(--okd-color-gray-900)) 100%)
}

.okds-trending-up {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-trending-up:before {
    content: "\e0a6";
    font-family: ok-b983c4766d
}

.okds-toggle-units {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-toggle-units:before {
    content: "\e0a5";
    font-family: ok-b983c4766d
}

.okds-chevron-right-text-button {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-chevron-right-text-button:before {
    content: "\e0a4";
    font-family: ok-b983c4766d
}

.okds-calendar {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-calendar:before {
    content: "\e01e";
    font-family: ok-b983c4766d
}

.okds-p2p {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-p2p:before {
    content: "\e0a3";
    font-family: ok-b983c4766d
}

.okds-express-buy {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-express-buy:before {
    content: "\e0a2";
    font-family: ok-b983c4766d
}

.okds-cash-fiat {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-cash-fiat:before {
    content: "\e0a1";
    font-family: ok-b983c4766d
}

.okds-chevron-down {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-chevron-down:before {
    content: "\e0a0";
    font-family: ok-b983c4766d
}

.okds-chevron-up {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-chevron-up:before {
    content: "\e09f";
    font-family: ok-b983c4766d
}

.okds-xbtc {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-xbtc:before {
    content: "\e09e";
    font-family: ok-b983c4766d
}

.okds-selected {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-selected:before {
    content: "\e09c";
    font-family: ok-b983c4766d
}

.okds-unselected {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-unselected:before {
    content: "\e09d";
    font-family: ok-b983c4766d
}

.okds-checkmark {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-checkmark:before {
    content: "\e022";
    font-family: ok-b983c4766d
}

.okds-refresh {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-refresh:before {
    content: "\e09b";
    font-family: ok-b983c4766d
}

.okds-draw {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-draw:before {
    content: "\e09a";
    font-family: ok-b983c4766d
}

.okds-sun {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-sun:before {
    content: "\e099";
    font-family: ok-b983c4766d
}

.okds-moon {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-moon:before {
    content: "\e098";
    font-family: ok-b983c4766d
}

.okds-clear {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-clear:before {
    content: "\e097";
    font-family: ok-b983c4766d
}

.okds-thumb_up {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-thumb_up:before {
    content: "\e096";
    font-family: ok-b983c4766d
}

.okds-thumb_down {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-thumb_down:before {
    content: "\e095";
    font-family: ok-b983c4766d
}

.okds-zoom-out {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-zoom-out:before {
    content: "\e094";
    font-family: ok-b983c4766d
}

.okds-zoom-in {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-zoom-in:before {
    content: "\e093";
    font-family: ok-b983c4766d
}

.okds-information-circle {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-information-circle:before {
    content: "\e055";
    font-family: ok-b983c4766d
}

.okds-warning-circle-fill {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-warning-circle-fill:before {
    content: "\e07d";
    font-family: ok-b983c4766d
}

.okds-success-circle-fill {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-success-circle-fill:before {
    content: "\e084";
    font-family: ok-b983c4766d
}

.okds-information-circle-fill {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-information-circle-fill:before {
    content: "\e052";
    font-family: ok-b983c4766d
}

.okds-fail-circle-fill {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-fail-circle-fill:before {
    content: "\e02f";
    font-family: ok-b983c4766d
}

.okds-arrow-chevron-right-centered-xs {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-chevron-right-centered-xs:before {
    content: "\e092";
    font-family: ok-b983c4766d
}

.okds-arrow-chevron-right-centered-sm {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-chevron-right-centered-sm:before {
    content: "\e015";
    font-family: ok-b983c4766d
}

.okds-arrow-chevron-right-centered-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-chevron-right-centered-md:before {
    content: "\e014";
    font-family: ok-b983c4766d
}

.okds-arrow-pointer-right-xs {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-pointer-right-xs:before {
    content: "\e091";
    font-family: ok-b983c4766d
}

.okds-arrow-pointer-right-sm {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-pointer-right-sm:before {
    content: "\e00e";
    font-family: ok-b983c4766d
}

.okds-arrow-pointer-right-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-pointer-right-md:before {
    content: "\e00d";
    font-family: ok-b983c4766d
}

.okds-user {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-user:before {
    content: "\e07b";
    font-family: ok-b983c4766d
}

.okds-plus-circle-filled {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-plus-circle-filled:before {
    content: "\e065";
    font-family: ok-b983c4766d
}

.okds-intermediate {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-intermediate:before {
    content: "\e090";
    font-family: ok-b983c4766d
}

.okds-arrow-chevron-left-centered-sm {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-chevron-left-centered-sm:before {
    content: "\e013";
    font-family: ok-b983c4766d
}

.okds-eye-hide {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-eye-hide:before {
    content: "\e03d";
    font-family: ok-b983c4766d
}

.okds-eye-show {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-eye-show:before {
    content: "\e03f";
    font-family: ok-b983c4766d
}

.okds-copy {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-copy:before {
    content: "\e033";
    font-family: ok-b983c4766d
}

.okds-history {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-history:before {
    content: "\e04f";
    font-family: ok-b983c4766d
}

.okds-back-to-top {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-back-to-top:before {
    content: "\e08f";
    font-family: ok-b983c4766d
}

.okds-clock {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-clock:before {
    content: "\e028";
    font-family: ok-b983c4766d
}

.okds-hamburger-setting {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-hamburger-setting:before {
    content: "\e04c";
    font-family: ok-b983c4766d
}

.okds-trash {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-trash:before {
    content: "\e089";
    font-family: ok-b983c4766d
}

.okds-fees {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-fees:before {
    content: "\e040";
    font-family: ok-b983c4766d
}

.okds-open-link {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-open-link:before {
    content: "\e05d";
    font-family: ok-b983c4766d
}

.okds-setting {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-setting:before {
    content: "\e074";
    font-family: ok-b983c4766d
}

.okds-crown {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-crown:before {
    content: "\e08e";
    font-family: ok-b983c4766d
}

.okds-share {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-share:before {
    content: "\e078";
    font-family: ok-b983c4766d
}

.okds-support {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-support:before {
    content: "\e086";
    font-family: ok-b983c4766d
}

.okds-analysis {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-analysis:before {
    content: "\e003";
    font-family: ok-b983c4766d
}

.okds-academy {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-academy:before {
    content: "\e000";
    font-family: ok-b983c4766d
}

.okds-action-reverse {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-action-reverse:before {
    content: "\e001";
    font-family: ok-b983c4766d
}

.okds-aed {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-aed:before {
    content: "\e002";
    font-family: ok-b983c4766d
}

.okds-arrow-cheveron-alignleft-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-cheveron-alignleft-md:before {
    content: "\e004";
    font-family: ok-b983c4766d
}

.okds-arrow-cheveron-first-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-cheveron-first-md:before {
    content: "\e005";
    font-family: ok-b983c4766d
}

.okds-arrow-cheveron-last-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-cheveron-last-md:before {
    content: "\e006";
    font-family: ok-b983c4766d
}

.okds-arrow-chevron-down-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-chevron-down-md:before {
    content: "\e007";
    font-family: ok-b983c4766d
}

.okds-arrow-chevron-down-sm {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-chevron-down-sm:before {
    content: "\e008";
    font-family: ok-b983c4766d
}

.okds-arrow-pointer-down-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-pointer-down-md:before {
    content: "\e009";
    font-family: ok-b983c4766d
}

.okds-arrow-pointer-down-sm {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-pointer-down-sm:before {
    content: "\e00a";
    font-family: ok-b983c4766d
}

.okds-arrow-pointer-left-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-pointer-left-md:before {
    content: "\e00b";
    font-family: ok-b983c4766d
}

.okds-arrow-pointer-left-sm {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-pointer-left-sm:before {
    content: "\e00c";
    font-family: ok-b983c4766d
}

.okds-arrow-pointer-up-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-pointer-up-md:before {
    content: "\e00f";
    font-family: ok-b983c4766d
}

.okds-arrow-pointer-up-sm {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-pointer-up-sm:before {
    content: "\e010";
    font-family: ok-b983c4766d
}

.okds-arrow-chevron-up-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-chevron-up-md:before {
    content: "\e011";
    font-family: ok-b983c4766d
}

.okds-arrow-chevron-left-centered-md {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-chevron-left-centered-md:before {
    content: "\e012";
    font-family: ok-b983c4766d
}

.okds-arrow-chevron-up-sm {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-arrow-chevron-up-sm:before {
    content: "\e016";
    font-family: ok-b983c4766d
}

.okds-bell {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-bell:before {
    content: "\e017";
    font-family: ok-b983c4766d
}

.okds-authenticator {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-authenticator:before {
    content: "\e018";
    font-family: ok-b983c4766d
}

.okds-borrow {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-borrow:before {
    content: "\e019";
    font-family: ok-b983c4766d
}

.okds-brl {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-brl:before {
    content: "\e01a";
    font-family: ok-b983c4766d
}

.okds-brush {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-brush:before {
    content: "\e01b";
    font-family: ok-b983c4766d
}

.okds-cancel-order {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-cancel-order:before {
    content: "\e01c";
    font-family: ok-b983c4766d
}

.okds-candlestick {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-candlestick:before {
    content: "\e01d";
    font-family: ok-b983c4766d
}

.okds-carets-filled-down {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-carets-filled-down:before {
    content: "\e01f";
    font-family: ok-b983c4766d
}

.okds-chat-bubble {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-chat-bubble:before {
    content: "\e020";
    font-family: ok-b983c4766d
}

.okds-carets-filled-up {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-carets-filled-up:before {
    content: "\e021";
    font-family: ok-b983c4766d
}

.okds-clear-fill {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-clear-fill:before {
    content: "\e023";
    font-family: ok-b983c4766d
}

.okds-assets {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-assets:before {
    content: "\e024";
    font-family: ok-b983c4766d
}

.okds-bank {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-bank:before {
    content: "\e025";
    font-family: ok-b983c4766d
}

.okds-clock-filled {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-clock-filled:before {
    content: "\e026";
    font-family: ok-b983c4766d
}

.okds-clock-outline {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-clock-outline:before {
    content: "\e027";
    font-family: ok-b983c4766d
}

.okds-close {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-close:before {
    content: "\e029";
    font-family: ok-b983c4766d
}

.okds-communication-call {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-communication-call:before {
    content: "\e02a";
    font-family: ok-b983c4766d
}

.okds-communication-idcard {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-communication-idcard:before {
    content: "\e02b";
    font-family: ok-b983c4766d
}

.okds-communication-img-failed {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-communication-img-failed:before {
    content: "\e02c";
    font-family: ok-b983c4766d
}

.okds-communications-faceid {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-communications-faceid:before {
    content: "\e02d";
    font-family: ok-b983c4766d
}

.okds-eye-show-filled {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-eye-show-filled:before {
    content: "\e02e";
    font-family: ok-b983c4766d
}

.okds-communication-img {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-communication-img:before {
    content: "\e030";
    font-family: ok-b983c4766d
}

.okds-convertokb {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-convertokb:before {
    content: "\e031";
    font-family: ok-b983c4766d
}

.okds-cursor-drag {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-cursor-drag:before {
    content: "\e032";
    font-family: ok-b983c4766d
}

.okds-data-line-chart {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-data-line-chart:before {
    content: "\e034";
    font-family: ok-b983c4766d
}

.okds-deposit {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-deposit:before {
    content: "\e035";
    font-family: ok-b983c4766d
}

.okds-cursor-zoom {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-cursor-zoom:before {
    content: "\e036";
    font-family: ok-b983c4766d
}

.okds-download {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-download:before {
    content: "\e037";
    font-family: ok-b983c4766d
}

.okds-exchange {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-exchange:before {
    content: "\e038";
    font-family: ok-b983c4766d
}

.okds-developers {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-developers:before {
    content: "\e039";
    font-family: ok-b983c4766d
}

.okds-eur {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-eur:before {
    content: "\e03a";
    font-family: ok-b983c4766d
}

.okds-edit {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-edit:before {
    content: "\e03b";
    font-family: ok-b983c4766d
}

.okds-expand {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-expand:before {
    content: "\e03c";
    font-family: ok-b983c4766d
}

.okds-eye-hide-filled {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-eye-hide-filled:before {
    content: "\e03e";
    font-family: ok-b983c4766d
}

.okds-fail-circle {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-fail-circle:before {
    content: "\e041";
    font-family: ok-b983c4766d
}

.okds-filter {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-filter:before {
    content: "\e042";
    font-family: ok-b983c4766d
}

.okds-finance-bank {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-finance-bank:before {
    content: "\e043";
    font-family: ok-b983c4766d
}

.okds-finance-seagull {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-finance-seagull:before {
    content: "\e044";
    font-family: ok-b983c4766d
}

.okds-finance-earn {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-finance-earn:before {
    content: "\e045";
    font-family: ok-b983c4766d
}

.okds-futures {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-futures:before {
    content: "\e046";
    font-family: ok-b983c4766d
}

.okds-funding-rates {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-funding-rates:before {
    content: "\e047";
    font-family: ok-b983c4766d
}

.okds-gbp {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-gbp:before {
    content: "\e048";
    font-family: ok-b983c4766d
}

.okds-guide {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-guide:before {
    content: "\e049";
    font-family: ok-b983c4766d
}

.okds-hamburger-edit {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-hamburger-edit:before {
    content: "\e04a";
    font-family: ok-b983c4766d
}

.okds-hamburger-search {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-hamburger-search:before {
    content: "\e04b";
    font-family: ok-b983c4766d
}

.okds-hamburger {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-hamburger:before {
    content: "\e04d";
    font-family: ok-b983c4766d
}

.okds-hierachy {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-hierachy:before {
    content: "\e04e";
    font-family: ok-b983c4766d
}

.okds-id-card {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-id-card:before {
    content: "\e050";
    font-family: ok-b983c4766d
}

.okds-img {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-img:before {
    content: "\e051";
    font-family: ok-b983c4766d
}

.okds-link {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-link:before {
    content: "\e053";
    font-family: ok-b983c4766d
}

.okds-insurance-fund {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-insurance-fund:before {
    content: "\e054";
    font-family: ok-b983c4766d
}

.okds-locked {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-locked:before {
    content: "\e056";
    font-family: ok-b983c4766d
}

.okds-language {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-language:before {
    content: "\e057";
    font-family: ok-b983c4766d
}

.okds-mail {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-mail:before {
    content: "\e058";
    font-family: ok-b983c4766d
}

.okds-margin {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-margin:before {
    content: "\e059";
    font-family: ok-b983c4766d
}

.okds-logout {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-logout:before {
    content: "\e05a";
    font-family: ok-b983c4766d
}

.okds-minus {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-minus:before {
    content: "\e05b";
    font-family: ok-b983c4766d
}

.okds-more {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-more:before {
    content: "\e05c";
    font-family: ok-b983c4766d
}

.okds-network-fee-standard {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-network-fee-standard:before {
    content: "\e05e";
    font-family: ok-b983c4766d
}

.okds-option {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-option:before {
    content: "\e05f";
    font-family: ok-b983c4766d
}

.okds-orders {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-orders:before {
    content: "\e060";
    font-family: ok-b983c4766d
}

.okds-pending-circle {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-pending-circle:before {
    content: "\e061";
    font-family: ok-b983c4766d
}

.okds-pie-chart {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-pie-chart:before {
    content: "\e062";
    font-family: ok-b983c4766d
}

.okds-place-order {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-place-order:before {
    content: "\e063";
    font-family: ok-b983c4766d
}

.okds-play {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-play:before {
    content: "\e064";
    font-family: ok-b983c4766d
}

.okds-plus-circle {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-plus-circle:before {
    content: "\e066";
    font-family: ok-b983c4766d
}

.okds-plus {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-plus:before {
    content: "\e067";
    font-family: ok-b983c4766d
}

.okds-profile {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-profile:before {
    content: "\e068";
    font-family: ok-b983c4766d
}

.okds-qrcode {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-qrcode:before {
    content: "\e069";
    font-family: ok-b983c4766d
}

.okds-question-mark-circle-fill {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-question-mark-circle-fill:before {
    content: "\e06a";
    font-family: ok-b983c4766d
}

.okds-question-mark-circle {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-question-mark-circle:before {
    content: "\e06b";
    font-family: ok-b983c4766d
}

.okds-sort-up-center-aligned {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-sort-up-center-aligned:before {
    content: "\e06c";
    font-family: ok-b983c4766d
}

.okds-records {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-records:before {
    content: "\e06d";
    font-family: ok-b983c4766d
}

.okds-red-packe {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-red-packe:before {
    content: "\e06e";
    font-family: ok-b983c4766d
}

.okds-scan {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-scan:before {
    content: "\e06f";
    font-family: ok-b983c4766d
}

.okds-report-centre {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-report-centre:before {
    content: "\e070";
    font-family: ok-b983c4766d
}

.okds-security-fill {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-security-fill:before {
    content: "\e071";
    font-family: ok-b983c4766d
}

.okds-search {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-search:before {
    content: "\e072";
    font-family: ok-b983c4766d
}

.okds-security {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-security:before {
    content: "\e073";
    font-family: ok-b983c4766d
}

.okds-transfer {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-transfer:before {
    content: "\e075";
    font-family: ok-b983c4766d
}

.okds-settlement-history {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-settlement-history:before {
    content: "\e076";
    font-family: ok-b983c4766d
}

.okds-trends {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-trends:before {
    content: "\e077";
    font-family: ok-b983c4766d
}

.okds-sort-default-center-aligned {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-sort-default-center-aligned:before {
    content: "\e079";
    font-family: ok-b983c4766d
}

.okds-sort-default {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-sort-default:before {
    content: "\e07a";
    font-family: ok-b983c4766d
}

.okds-sort-down-center-aligned-svg {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-sort-down-center-aligned-svg:before {
    content: "\e07c";
    font-family: ok-b983c4766d
}

.okds-withdraw {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-withdraw:before {
    content: "\e07e";
    font-family: ok-b983c4766d
}

.okds-sort-down {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-sort-down:before {
    content: "\e07f";
    font-family: ok-b983c4766d
}

.okds-sort-up {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-sort-up:before {
    content: "\e080";
    font-family: ok-b983c4766d
}

.okds-star-filled {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-star-filled:before {
    content: "\e081";
    font-family: ok-b983c4766d
}

.okds-star {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-star:before {
    content: "\e082";
    font-family: ok-b983c4766d
}

.okds-strong-alert {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-strong-alert:before {
    content: "\e083";
    font-family: ok-b983c4766d
}

.okds-success-circle {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-success-circle:before {
    content: "\e085";
    font-family: ok-b983c4766d
}

.okds-trade-1 {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-trade-1:before {
    content: "\e087";
    font-family: ok-b983c4766d
}

.okds-transfer-circle {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-transfer-circle:before {
    content: "\e088";
    font-family: ok-b983c4766d
}

.okds-unlocked {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-unlocked:before {
    content: "\e08a";
    font-family: ok-b983c4766d
}

.okds-unlink {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-unlink:before {
    content: "\e08b";
    font-family: ok-b983c4766d
}

.okds-usd {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-usd:before {
    content: "\e08c";
    font-family: ok-b983c4766d
}

.okds-warning-circle {
    --ok-icon-font-family: "ok-b983c4766d"
}

.okds-warning-circle:before {
    content: "\e08d";
    font-family: ok-b983c4766d
}

.iconfont {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    font-style: normal
}

.iconfont:before {
    display: inline-block
}



[dir=rtl] .okds-arrow-cheveron-alignleft-md:before,
[dir=rtl] .okds-arrow-cheveron-first-md:before,
[dir=rtl] .okds-arrow-cheveron-last-md:before,
[dir=rtl] .okds-arrow-chevron-left-centered-md:before,
[dir=rtl] .okds-arrow-chevron-left-centered-sm:before,
[dir=rtl] .okds-arrow-chevron-right-centered-md:before,
[dir=rtl] .okds-arrow-chevron-right-centered-sm:before,
[dir=rtl] .okds-arrow-chevron-right-centered-xs:before,
[dir=rtl] .okds-arrow-pointer-left-md:before,
[dir=rtl] .okds-arrow-pointer-left-sm:before,
[dir=rtl] .okds-arrow-pointer-right-md:before,
[dir=rtl] .okds-arrow-pointer-right-sm:before,
[dir=rtl] .okds-arrow-pointer-right-xs:before,
[dir=rtl] .okds-communication-idcard:before,
[dir=rtl] .okds-copy:before,
[dir=rtl] .okds-eye-hide-filled:before,
[dir=rtl] .okds-eye-hide:before,
[dir=rtl] .okds-guide:before,
[dir=rtl] .okds-logout:before,
[dir=rtl] .okds-network-fee-standard:before,
[dir=rtl] .okds-open-link:before,
[dir=rtl] .okds-orders:before,
[dir=rtl] .okds-question-mark-circle-fill:before,
[dir=rtl] .okds-question-mark-circle:before,
[dir=rtl] .okds-report-centre:before {
    transform: scaleX(-1)
}

.okui-carousel {
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.okui-carousel-track {
    cursor: grab;
    display: flex;
    position: relative
}

.okui-carousel-track-grid {
    display: grid;
    grid-auto-flow: column
}

.okui-carousel-slide {
    --okd-carousel-slide-spacing: 0;
    flex-shrink: 0;
    height: 100%;
    margin-right: var(--okd-carousel-slide-spacing);
    position: relative
}

.okui-carousel-slide:last-child {
    margin-right: 0
}

.okui-carousel .switch-button {
    align-items: center;
    background-color: transparent;
    background-color: var(--okd-carousel-switch-button-bg-color, transparent);
    border: 2px solid #dbdbdb;
    border: var(--okd-carousel-switch-button-bg-border-width, 2px) solid var(--okd-carousel-switch-button-bg-border-color, #dbdbdb);
    border-radius: 50%;
    color: #000;
    color: var(--okd-carousel-switch-button-font-color, #000);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    height: var(--okd-carousel-switch-button-wdith, 44px);
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    width: var(--okd-carousel-switch-button-wdith, 44px);
    z-index: 2
}

.okui-carousel .switch-button-prev {
    left: 10px;
    left: var(--okd-carousel-switch-button-distance, 10px)
}

.okui-carousel .switch-button-next {
    right: 10px;
    right: var(--okd-carousel-switch-button-distance, 10px)
}

.okui-carousel .switch-button:hover {
    background: #000;
    background: var(--okd-carousel-switch-button-bg-color-hover, #000);
    border: 2px solid #000;
    border: var(--okd-carousel-switch-button-bg-border-width, 2px) solid #000;
    color: #fafafa;
    color: var(--okd-carousel-switch-button-font-color, #fafafa)
}

.okui-carousel .switch-button .icon-next,
.okui-carousel .switch-button .icon-prev {
    font-size: 28px;
    font-size: var(--okd-carousel-switch-button-font-size, 28px)
}

.okui-carousel .switch-button .icon-prev {
    transform: rotate(90deg)
}

.okui-carousel .switch-button .icon-next {
    transform: rotate(-90deg)
}

.okui-carousel-indicators {
    bottom: 20px;
    bottom: var(--okd-carousel-indicators-bottom, 20px);
    display: flex;
    left: 50%;
    list-style: none;
    position: absolute;
    transform: translateX(-50%)
}

.okui-carousel-indicator {
    background-color: #bdbdbd;
    background-color: var(--okd-carousel-indicator-bg-color, #bdbdbd);
    border: none;
    cursor: pointer;
    display: block;
    height: 6px;
    height: var(--okd-carousel-indicator-height, 6px);
    margin-right: 13px;
    margin-right: var(--okd-carousel-indicator-margin, 13px);
    transition: background-color .5s;
    width: 60px;
    width: var(--okd-carousel-indicator-width, 60px)
}

.okui-carousel-indicator:last-child {
    margin-right: 0
}

.okui-carousel-indicator.active {
    background-color: #000;
    background-color: var(--okd-carousel-indicator-bg-color-active, #000)
}